Sass Crash Course

[Music] what's going on guys welcome to my SAS crash course now I've done a bunch of projects on my channel and in courses using SAS however I've never done an actual crash course dedicated to it so I wanted to do that for people just getting into learning SAS so we're going to talk about what it is some of its benefits and features how to get set up and how to compile SAS down to regular CSS and we're gonna create just a simple project that will implement most of the features like variables nesting inheritance and so on and there's other CSS preprocessors similar to SAS you have less you have stylists there's some other ones as well but SAS is definitely the most popular and that's what I would recommend learning over the others so let's talk a little bit about what SAS is it stands for syntactically awesome style sheets and it's a it's what's called a CS CSS preprocessor or sometimes referred to as a CSS language or a CSS extension and it basically allows you to go beyond the natural capabilities of CSS it it allows your CSS to to act more like an actual programming language and you write more efficient CSS with sass we can even have logic you know conditionals with logic and functions and stuff like that which I'll show you later on now it's important to know that the browser doesn't read sass files directly so it has to be compiled down to regular CSS and in order to do that you need some kind of sass compiler and you have a ton of choices when it comes to this what I'm going to show you is is the basic NPM module so we can install sass with NPM and we can compile it with that through the command line but then I'm going to show you my preferred way which is right right in vs code there's an extension called live sass compiler that will do it right on the fly and that's usually what I use but there's there's a lot of other options you can implement it in your the workflow of your your application if you're using like gulp or something like that if you're using react or some kind of framework so a lot lots of different options now when it comes to writing Sasa's there's basically two different methods and there's two different file extensions so we have dot s CSS files which is what I'll be using this seems to be the preferred because it's it's basically backwards compatible with regular CSS it has the curly braces as you can see so it's formatted just like CSS you just have some some extra abilities you can nest you can use variables like you can see here and then you also have the option of using a dot sass file where instead of using curly braces we use indentation you can see this this body selector there's no curly braces the styles are indented and I don't really like this method I've pretty much never used it but some developers do prefer it especially if you you you're into like the Pug template engine where you use this kind of style for your markup but like I said I don't really use this method so we're gonna stick to the S CSS files so I just want to quickly go over some of the features of sass Before we jump in and I give you some examples so first we have variables now it's important to mention that CSS itself that regular CSS does now have the ability to use variables they're also they're actually called custom properties I do have a video on that if you're interested however the syntax isn't very pretty sass allows us to do it in a much easier more readable way we just simply use a dollar sign and then the variable and then we can put any styles that we want so here we have a font stack here we have a primary color and we can use those anywhere within our selectors in our CSS okay so I mean if you have a color that's going to repeat throughout your CSS then it's good to have a variable so you can just edit it up here instead of going through and editing all the values so nesting is is one of the main reasons that I like to use sass instead of repeating the CSS selector with the children like nav ul nav li nav a you can simply nest that the children the child selectors in the parent like this so we just have a nav tag then we have a ul Li and a and these will only pertain to the UL li and tags that are within a nav tag and obviously you can use classes and IDs and so on as well so next we have modules and partials basically we can break up our CSS into separate files and our assassin should say and then bring them all into some kind of main sass file now unlike plain CSS imports because you can you can import files with regular CSS but when you do that it makes multiple HTTP requests as it renders your page with sass the imports are handled entirely during compilation so you end up with just this one big sass CSS file that you then upload to your server so this is great for creating you know CSS components like buttons and alerts you can have a separate file for all of your CSS components or even break it up into pages if you want in about dot sass or at CSS file or contact dot s CSS file you can do that and as long as you put an underscore in the name it's not going to compile that file the sass compiler will ignore it and you'll you can just import it or use it in another sass file so like I said sass makes your CSS more like an actual programming language we have functions and mix-ins which allow you to create blocks of CSS that you can run wherever you want just like you would a function in some type of programming language so this example is actually a mixin called transform which takes in a parameter you can have parameters just like regular functions and it gets passed in a property you can see over here or down here it's being used to pass in a transform property and then what we're doing is just adding this to the different prefixes for the different browsers as well as just the regular transform property and it's going to add it to all of those now instead of having to do this these three lines wherever you want to use this you can simply include the mixin now functions work in a very similar way except with functions they actually return something a mixin you're just pretty much placing the CSS there with a function you can return something and I'm going to give you an example that later on also with functions you don't actually need to use this include here so inheritance are extending is another really cool feature of sass now a lot of times you'll have elements like buttons are alert messages where you'll have like different colors and stuff but the the base of it will all be the same so in this case we have these messages we have success error warning and they're all going to have this style with the border the padding the color and so on so what we can do is just create that base the base styles and then we can extend them into these other classes so for success we're gonna extend all this stuff here but also add a green border for error a red border for warning a yellow border okay so it makes it easier to create alerts and buttons and stuff like that now we also have the ability to use operators honestly I don't use this feature very much but we have the ability to do calculations this is an example where we're calculating floats although I mean I haven't used floats and in probably a couple years but we do have the ability to use operators for different things so we also have the ability to use conditionals which again makes ass more like an actual programming language because we can have logic we can have if statements and if-else statements in our CSS and we we may only want to have a certain style if a certain condition is met and this is something that's very helpful in our styling so here it's actually a mixin that takes in some parameters and we're just checking the direction to see if it equals up if it does then we're gonna add a boarder bottom color if it's right then we'll add a border left and so on so this can be very very helpful in our styling okay so enough with the slides I don't want to bore you to death let's jump in and let's take a look at sass okay so what I wanted to do here is something pretty simple I didn't want to do like a whole website or anything like that so what I did is I took part of a landing page from a themed site called themes brand calm and just copied the header basically and just with this right here we're gonna implement pretty much everything that I've talked about variables nesting partials and functions mix-ins things like that so it's not much as far as what we're creating but we're gonna we're gonna use quite a bit of sass and regular CSS so if you're not that familiar with CSS I would definitely suggest watching my CSS crash course first okay so let's jump into vs code and what I have here is just the HTML I haven't created anything else just an index.html file if you want to copy this you can if you want to get it from the code pen in the description you can but basically we're including a file here that's going to be in a CSS folder and then style dot CSS or just a regular CSS file that doesn't exist yet and then we just basically have a header that wraps around everything with the class of showcase we have a container so that we can push everything to the middle we have a nav that has an h1 with our logo it's basically just text and then a ul for the menu and then we have a div with the class of showcase content that includes a div with our content like the heading the paragraph the buttons and then an image from the themes brand template okay and notice some of these classes BTN primary BTN secondary my one this will make more sense later on so that's the HTML and we can go ahead and open this up you can either open it on your file system or you can use live server which is what I'm using which is a vs code extension okay so if I open it up that's what it looks like that's just the HTML now to get started with sass let's create a folder here called s CSS and in here we're going to create a file called style dot s CSS make sure you use that extension and if you're using vs code you should see the little sass icon and then I'm just going to create a folder in the root called CSS as well okay now I'm not going to create any files I'm just going to create the folder now in here let's just add some some bass styling for now so we'll add a reset let's say box-sizing border-box and I'm not going to explain all the CSS you should have decent knowledge in CSS we're just resetting the margin and padding here and then let's add a little bit of sass so I'm just going to create a variable called light color and set that to F for three times and then in the body we'll create a background color and set that to our variable of light color and then I'm also just going to add the font family we'll use Arial and a line height of let's say 1.6 and as far as variables go I mean it's up to you what you want to put in them I usually use variables where it's something I'll use over and over like this light color I might use and I don't know a card header or something like that or a button so that's usually when I use variables but of course you could put anything in a variable we could take this font stack like you saw they did in the documentation we could take that and say font stack and set that so any CSS Styles you can set into a variable now obviously this is not regular CSS and we can't include a sass file or an S CSS file we can't do this so we need a compiler and like I told you I'm going to show you two different ways I prefer the vs code extension live sass compiler but just in case you're not using vyas code I'm going to show you how to use the npm module so if you open up a terminal and obviously you need nodejs installed because you need access to npm which is the node package manager we can say sudo because i'm going to install this globally npm install - g for global sass and solving it globally will give us access to the SAS command so I can say SAS - - watch because I want to continue to watch my sass file we need to specify where that SAS file is which is style dot s CSS and then the output which is going to be CSS style dot CSS so if I go ahead and run that we get a message that says it's compiled it and also it's watching for changes so if I change anything in here it'll compile so if we look in CSS now in our folder it created two files one is this map file this is a source map usually I disable these I don't even really use source maps with sass but you do have the option and then it created a style CSS and if we look at this it's just regular CSS there's no variables or anything it basically just replaced those values with whatever the value was excuse me inside of our variable okay now you want to be sure you don't edit your CSS file because that's gonna keep getting recompiled if I change something here like I change this variable to red and I save and I go back to style.css now that's red so you don't want to ever touch your CSS when you're dealing with sass okay let's just set that back now I'm not going to use this this sass module so I'm going to ctrl C to stop this and then I'm gonna just delete the two files that are generated and I'm going to show you the vs code extension so if we go to the extensions icon here and you search for live sass you'll see this live sass compiler and this is what I would recommend using because it's just really easy and it's just it's a really nice extension especially in combination with live server so if you install that excuse me which I already have installed you'll see this watch sass button now before I click that I just want to show you in my settings if we go if we search for live sass so right here live sass compiler we actually want to go to the settings Jason so I have a bunch of settings but the ones I want you to look at are these so these have to do with the live SAS compiler this is just setting the source maps to false so it won't generate any source Maps and then in here in this dot formats array we have an object that has a format of compressed okay there's other options I forget the other options but compress will just make it basically minified it'll scrunch it all together make a smaller file size if you want the extension to be min dot CSS if you want it to generate that you can do so I'm not I you see I have that commented out and then the save path is where it will get compiled which for me is gonna be in this CSS folder in my root you might have like a dist folder or something and you can change that if you want but those are my settings so if you want to copy those you can and then I'm just gonna close that up and we'll go ahead and click watch SAS so now what happened is it compiled it you can see the style dot CSS it created and it's also gonna continuously watch my my sass file and if we look at what it generated it generated regular CSS that is compressed or minified ok so it's all scrunched together you don't have to do that you can change the setting if you want alright and if we make a mistake like let's say I don't have a value here and I save it should tell me that down here in the terminal or in the output you can see the error it'll also show it in the problems tab variable value expected okay so it's just a really cool extension and gives you a really nice workflow okay and as I save live server will also update you can see we have the gray background we have the the Arial font and so on so let's continue to basically build this landing page using SAS and obviously I'm going to use some some regular CSS as well I'm going to use flexbox to align some stuff and so on but let's create a couple more variables I'm going to have a primary color and my primary color is going to be blue so that's gonna be hexadecimal zero when is it zero e 6c F F is my primary and then I'm also gonna have a secondary color and that's gonna be that orange color so that's FF eight seven zero zero okay and then let's see we're going to use that in our header so down here we have a class of show case which is the header that wraps everything and I'm going to set the background color to my primary color okay and then we'll set the color of the text to white and I'm going to set a height of 600 pixels so if I save that you can see that that takes effect now I want to work on the container because I want to push everything into the middle and the container is basically going to be in the root level I'm not going to nest it within showcase because we might use you might want to use this somewhere else as well so it's basically a utility class so let's say max with 1,100 pixels and let's do padding:0 30 pixels on the left and right auto left and right push it in the middle and then we'll just set an overflow of hidden our overflow of auto all right so if we take a look now everything is pushed to the middle and just going to make sure the image is a hundred percent of its container so we'll just set width of any image to a hundred percent so now I want to continue to work on the showcase stuff so the Showcase has the nav in it it has the showcase content which is all this stuff right here so let's let's work on the the navbar here now since the nav is inside of showcase we can go ahead and nest it because usually what we would do is something like showcase nav or showcase ul or Li whatever a child that we wanted to style inside the showcase we would have to create a separate block for but we can go ahead and nest this in here like that okay and this will only pertain to nav tags that are inside the showcase class so I'm gonna display flex here because I want everything aligned horizontal and then we'll set a line items to Center and then justify content remember we have two flex items I know this isn't a flexbox course but the two flex items in the nav or the logo and the UL and we want them separated on each side so we're gonna set this to space between so if I save that and we take a look now the logo is over here the UL is over here now the UL I also want as a flex box so that the items will align horizontal so let's go within the showcase within the nav and nest the UL so now this UL only pertains to you Elle's inside the nav inside the showcase class so let's say display flex and I'm going actually we don't need that let's do list-style:none and then for the Allies we have the choice to either nest it in here but I think it's a little neater if we put it outside of it this is still gonna only be allies that are in the showcase now but it's up to you on how you want to nest it and I'm just going to add a padding to separate them out so 15 pixels and if we look now we have our nav with our links at our horizontal now let's take care of the coloring and the underline so the underline I'm actually going to put that as a global style so all links we want to remove what's the text-decoration:none and for the colors of the links let's see I'm just gonna put inside the showcase outside of the nav because I want even links that are outside of the the nav I want them to have a color of white actually yeah we can do that now these are white to the buttons all right but I do want to have a hover color of the secondary color which is that orange I want to I want to have that for those for the allies so what we can do is we can say any a tag that is hovered but excuse me we can set the color to secondary color and that will only pertain to the nav nav links so let's go back and there we go it doesn't doesn't do that here okay so let's move on from the nav bar to the showcase content area now showcase content that class is within showcase right if we look at our HTML we have showcase and showcase content is within it so we can nest that in here so we want to go let's see after the nav after the a and we could do showcase - content now I want to show you that we can use the ampersand basically as a shortcut for the parent since this class is called dot showcase we can actually replace dot showcase with an ampersand if you want to do it like that I do like to do this and this will just render in or compile as dot showcase - content so let's set this to height of 1 percent and I'm gonna display this as flex because I want all the text on one side and then the image on another so I want them displayed horizontal and then let's align items Center and justify content Center and if we take a look you can see that it went ahead and did that now the image with I want to set it to 50% because that's way too big it's a hundred by default so inside here we'll go ahead and nest image and set that with 250 percent okay so that's better I also want to make the h1 a little bigger and add some margin on the paragraph so let's do that let's say h1 inside the showcase content we'll set the font size to let's say 50 pixels and I'm just going to add a line height of 1.2 so that they're not too far apart when there's two lines and then for the paragraph let's set a margin top and bottom 20 pixels okay and there we go now I want to before we do these buttons I want to show you how to use partials because a lot of times you don't want just one big monolithic file with all your CSS you can break it up into as many files as you want and ultimately it compiles into one CSS file it's not like you're so you have to make a bunch of requests to your server so inside my sass folder as CSS folder I'm going to create a file called underscore config dot s CSS and this is just what I like to do I like to have a config that has any variables mix-ins functions anything like that I like to put in that file so I'm just going to cut this and put it inside here and save now it's not going to compile this to a config dot CSS file because of the underscore that underscore tells SAS that this is a partial and that's what it's to be used for our partial it's to bring into another file it's not to be compiled on its own like style CS CSS so we can go ahead and we can just import and we can just say config we don't even have to do underscore or dot CSS and that should still work okay in fact if I go into my config and I change my primary color to red and save it should compile and now you can see I have a red header so I mean you can imagine if you have this really large website with different color buttons and headers and alerts and all that stuff and you have this one config file you can easily just change the entire look of your site by changing the values so that's one of the the biggest advantages of using SAS and obviously breaking everything up into different files in fact I'm gonna take my my container because this container is basically a utility right it's not it's not part of any specific element like the showcase or nav or anything so what I would do is create a new file here called underscore utilities dot as CSS and this would be for utility classes okay anything that I don't want to give its own file like the buttons will give its own file so in here we'll paste that in and save and then we'll import that just like we did config okay so our utilities classes and then I'll have a file for our buttons so we'll say imports buttons and then let's create that make sure you have an underscore because it's a partial and now we'll go ahead and do our buttons now here I'm gonna use inheritance because with buttons a lot of times you know you'll have the same shared styles or base styles and then you'll just have different colors or different borders so if we look in our HTML we have button primary and buttons secondary which they're gonna share a lot of styles they're just gonna be different colors so inside buttons I'm gonna actually create some shared styles with percent percentage BTN and you can extend classes and ID's you don't have to use this percent syntax but I'm gonna put everything in here that is going to be shared like where I want to display:inline-block I want them to have a border radius of five pixels so I want padding of 8 pixels 20 pixels and margin will do 3 pixels and then for the hover and we can just do ampersand colon hover because remember we're just using the parent and then the hover and let's just add a transform here to scale it down a little bit so we'll do point 9 8 okay now this these shared properties and values I want to use in BTN - primary and the way we use this is with at extend so we can extend that % button okay and then we can do the same thing for secondary so BTN secondary and then let's just change the background-color and this is going to use the primary color variable now we have access to these variables because in our main style s CSS we're including our config that has all the variables and then our button so this file has access to this okay because remember it all gets compiled into one one big CSS file here so let's go back to buttons and then we're gonna use the secondary secondary color here now if I go back and we take a look at this you can see we have the secondary color here and the primary here however the primary is the same as that you know we're using the primary as the header background so I want to use this opportunity to show you the lighten and darken functions so if I go back here where we're setting the background to primary I can use either darken or lighten and wrap this and what these take either lighten or darken is a color which in this case is primary color and then a percentage so what I'm gonna say here is I want to lighten this color 10% so if I save that and we go back you can see that now this is you can make this out because it's lighter than the primary color behind it okay so you can easily lighten and darken colors and if we look in our compiled CSS let's just see where this is so we want button primary which is its secondary so button primary right here where is the back I know this is kind of hard to read button primary right here background color so this hexadecimal is actually just it's a blue that's 10% lighter than what we set as our primary color so it does it processes all of that pre process those all of that and then out puts it in the CSS so pretty cool so what I want to do next is show you a bit of functions and conditionals we're actually going to use them at the same time because I want to show you if I go to my config right which has all my variables and let's say I want to change the primary color let's say I want to change it to something that is lighter so what's actually actually what we'll do is copy this down and comment that out and then change this value so let's change this to e well do a zero ffff which is like a very very light blue almost gray or white so if I save that and we take a look it changes our primary color but the text is is white right so we I mean this is unreadable so I want to create a function that will actually look at the lightness of the background color and then return a specific text color based on that so if it's a light background then I want this to be a dark color text if it's a dark background then have it be a light color text and this is actually one of my favorite I guess snippets when using sass is being able to do this so since it's a function I'm going to put it in my config and we just put a comment here and we'll say set text color based on background so the way we create a function is with at function and let's call this set - text - color and this is going to take in here a parameter of color so it's a variable so we need a money sign so it's basically the background color and then we want to check the lightness of it we can do that with sass and we can use a conditional by saying at if something and then we can do an else with a else thing and what we want to check here is the lightness okay so we have lightness and darkness and we want to check to see if the lightness of the color that's passed in is greater than let's do 70 okay because it's you know one through a hundred or whatever so we're gonna check to see if the lightness is greater than seventy so meaning if it's a light color then let's do a return so we can say at return and we can return let's do three three three which is a you know a dark color else then let's add return white okay so I'm gonna go ahead and save this and now we should be able to use this function wherever we want so the first place that I want to use this isn't right in our showcase so let's go to our style dot s CSS and go right down here so we have our background color and we have this manually set to white so I'm going to actually change this instead of white we're gonna use our set text color function and remember it gets taken in a background color which in our case is primary color so now if I save this and we go back now notice that the text in the showcase is dark now these links aren't so what we would probably want to do is go and say you know any links in here and we can go ahead and set that set that as well based on the primary color which is the background of the showcase so if I save that we go back you can see now these are dark as well now we can cut this we can make this even less so we can turn these two lines into one by creating a mix in so this is something else that I do quite often so I'll go to my config here and create a mixin to set the background color but this set background mixin will also implement this set text color so let's put a comment here and say set background and text color so remember a mixin is it's like a function but it doesn't actually return anything so let's say mixin set background we'll call ya set background and just like a function it takes in let's put a color it takes in a color and then we'll set that background color to whatever that color is and then we'll also set the color of the text here and we'll implement that set text color and pass in whatever that background color is so now we can save this and we can go back into our style sheet here and instead of using both of these lines here we can simply set or include I should say because it's a mixin we have to include set background and then just pass in whatever that the background color is for this element which is primary so now if I save this and I go back you can see it sets the background and the text matches it's dark if it's light and it's gonna be light if it's dark all right so let's also implement this in the buttons because right now you can see that this has white text on a light color because this is base number this is based on the primary color so in buttons let's go down here and let's see what we can do is we're actually gonna get rid of this but for now we'll just go under it and say include include set background now the background in this case is going to be the lightened primary color so we can actually take this and pass it right in there and then we can just get rid of this okay we can do the same down here okay and all we need is secondary color because that's the background of this button so now let's save that and okay so this is still white and that is because of this right here so basically this is overwriting it this a we don't we don't actually need this anymore so if we get rid of that now you can see the button the text is gonna the text color is gonna be based on the background so now if I go and I set in config let's set our primary color back to the original the blue and go back every all the text is the right color okay so the text is white again so now it doesn't matter what shade your background is your text is gonna reflect or it's gonna be the opposite of whatever the background is now the next thing I want to show you is something I haven't even mentioned yet and that's in each loop we can it we actually have loops in SAS and I'm gonna use it to create margin and padding classes so what what I've done here is I just added margin on the top and bottom of the paragraph itself and that is let's see right here so I have margin top and bottom 20 pixels I'm actually going to get rid of that and if we go back now that padding is gone so or that margin is gone now in my index.html you'll notice I have a class of my one on my paragraph and what I want to have is the ability to say my 1 through my 5 so my - 1 - 2 - 3 and have that be different values of margin on the top and bottom if I want margin all around I want to be able to do em one so that would do you know a certain amount of margin around everything around all sides same thing with padding P 1 or P y 1 so instead of having to type all that out in SAS we can actually create a loop so I'm gonna go into my config and I'm gonna do that here so let's say margin and padding classes and obviously I wouldn't do this if this were all I was doing was just one little header but if I wanted these classes to be available throughout my project then this is something that can you know it's it's more efficient than typing it all out so first thing I'll do is create a variable and obviously I'm just I'm doing this to show you how to do it so let's say space amounts and we can set this to a list and in this list I'm gonna have 1 2 3 4 5 ok and then down here what we'll do is we'll loop through this list so let's say at each and we'll say space variable space as well we'll call this in so it's just like a JavaScript for in loop or or in Python or something like that so let's say space amounts and open up some curly braces so now we have access it's going to loop through here and we have access to each of these numbers and it's going to be called space so I'm gonna create some classes this one here is gonna be dot M dash and then whatever that space is and the way we can access each iteration each number is with a number sign and then curly braces kind of like a template literal in JavaScript and we'll say space so this will create M - 1 - 2 all the way up to 5 and what I want to have is a stuff as a property here is margin and I'm gonna set it to whatever that space number is in REMS REM units okay so that will do all-around margin and then what I'll do is copy this down and this one let's call this one my - space and then this is going to be just the top and bottoms so we just wanted to put a zero here because it'll be whatever that spaces and REMS top and bottom zero left and right and you could even do like MX if you wanted to do on the sides okay just like how bootstrap has these classes and then let's do padding actually I'll just grab these and let's this will be P and P Y and then this will be padding and okay so if I save this and then we look at our compiled CSS and we look at the top here oh that's not right it shouldn't say space what did I do wrong oh I forgot the dollar sign so back in config we actually need to have the dollar sign because that signifies the variable inside here yeah here too okay so we'll save that and now let's take a look at the CSS and we have M - 1 which is margin one room all around my one is margin one REM top and bottom we have P one padding all around so it created all of these classes for us so we didn't actually have to type them out and we can use these anywhere and in the index.html we're already using my 1 and if we take a look we have one REM padding in fact if I open up my tools here and look at the CSS so my 1 we have margin 1 REM on the top and bottom so we have those utility classes all throughout we could in fact put that in the utilities that actually that might be that's probably a better place to put it I mean it doesn't really matter but I think that would be a better place to put it so in utilities because that's what what these are there are basically utility classes so that should still work all right now the last thing I want to do is make this responsive because right now this doesn't look too good so let's what I usually do and this whole course is basically what I prefer doing there's so many ways to do this stuff but this is just what I like so I usually create an underscore Mobil dot s CSS which will have my media queries sometimes they'll have like a tablet and a mobile but this is simple enough we're just going to do a 700 pixel media query so add media and let's set the max with 700 pixels so basically any screen that is less than 700 pixels let's go ahead and take the showcase and instead of a 600 pixel height let's make it 400 pixels and then the showcase content so we can do - content I want to align it all to the center on small screen so text align Center and then the image which is also in the content I'm gonna set to display:none because I don't even want to show it on small screens and then I'll bring it into my main style CSS however I'm not gonna put it up here I'm gonna put it at the bottom where I usually put my media queries so wherever you put this is where it'll show up in the compiled CSS I mean you might even want to put like your utilities and stuff yeah we could do that just keep the config at the top because that's where the variables are so we could do that and save and if we look at our compiled CSS okay so now we have all the utilities and stuff down at the bottom we have we should have our media query it which is right here it's hard to read but here's the media query down at the bottom and if we take a look at our site we probably want to push that down a little actually I want to do that anyways even on larger screens push the showcase content down a little so let's see a showcase then we have the showcase content so add say margin top maybe 30 pixels yeah so I think that's fine it doesn't really matter this doesn't have to be perfect and I mean the main point isn't to build this thing it's just to get you to learn how sass works with variables and partials and all this stuff all right so hopefully this helped you understand sass a little bit I know that we wrote some other CSS and we did some other things but hopefully the the parts that are important really stuck out and one important thing to mention is you don't you don't deploy this s CSS folder this is these are your development files okay this is your source code you don't deploy that a lot of times they'll have a separate folder called dist or something like that excuse me our build and you'll have your CSS and HTML and then you'll have this outside of it because all you need is this is just one file right here with these lines of CSS okay so but yeah that's it hopefully you enjoyed this and learn something from it and I'll see you in the next video

Channel: Traversy Media

Views: 234,749

Rating: 4.9798336 out of 5

Keywords: sass, css, css preprocessor, sass tutorial

Id: nu5mdN2JIwM

Length: 48min 4sec (2884 seconds)

Published: Fri Feb 28 2020