Supercharge your CSS Development with Sass (CSS Programming)

1. Introduction: Hi, I'm Christopher Dodd and in this class we're going to learn how to supercharge your CSS development using Sass. Sass is a preprocessor scripting language that is interpreted or compiled into CSS. It's essentially a programming language that allows us to write CSS with programming features like variables, nesting, and calculations. Of course, before taking this class, you should already be familiar with CSS. But if you've been using CSS for awhile, you've probably come up against a few situations in which you've had to write ridiculously long selectors or forgotten the hex or RGBA code of a color you've been using throughout your document. Well, these are just some of the few issues that Sass helps us to solve and trust me, once you start using Sass, you won't want to go back to the old way of writing CSS. So as the title suggests, this class is going to be all about improving your CSS development workflow with Sass. We'll look at how Sass works, and then we'll start using it, refactoring existing CSS code to use some of the best features of Sass. So if you're ready to supercharge your CSS development with Sass, click on the next video and I'll see you on the inside. 2. How Sass Works: Before we get started looking at some of the features of SaSS, I wanted to make sure that we all understand how SaSS actually works. Let me be clear. SaSS does not replace CSS, it helps to generate it. As you should already know, HTML is the markup language for the web, CSS is the language that describes the style of HTML, and JavaScript is the programming language of the web. These languages are the standard when it comes to front end web development and SaSS does not change this. SaSS is not something that can run in your browser. Instead, SaSS adds another layer to our CSS development. It will require an extra piece of software that takes the SaSS code and compiles it into CSS, that compiled CSS will now run in the browser as a normal CSS file. Given that CSS will remain the style sheet language of the web, why do we need to add an extra layer here? The answer is that we don't need to use SaSS at all, but using it just makes things a lot easier once we start to work on bigger projects. In order to turn SaSS code into CSS, a piece of software is required to compile the SaSS code, and this software could be cloud-based or run locally. In the next lesson, I'll demonstrate the cool features of SaSS using a cloud-based tool, and then in the following lesson, we'll learn how to set up a tool on your own computer for compiling SaSS. Sounds good? Great. Let's jump into the next lesson, where we'll start writing some actual SaSS. 3. The Main Features of Sass: As is the case with learning pretty much any technology on the web, the best place to get started is the official website. I'm here on sass-lang.com and this is the website for Sass. As you can see, lots of information here. I'm going to click on this link to learn Sass. Here you can see a page for Sass basics. These are some of the features we're going to be talking about in this video. If you get lost at any point, you can just come here for reference. Note that for each of these examples, there is a Sass version and an SCSS version. We're going to cover the difference between those two in this lesson as well. Don't worry about that just yet, we'll cover that very shortly. To demonstrate these main features, I don't want to start with installing a compiler on your computer just yet. I want to get straight into showing you Sass. I'm going to start with a cloud-based Sass emulator here. That one is called sassmeister.com. Here you can see it is already saved some example code that I've already been working on. Let me just clear this, and let's recreate it now for you guys, so you can see what's going on. Just before we get started with the Sass syntax, I wanted to briefly mention that if you haven't already studied CSS and know how to use it, then definitely go and do that first. I mean, you can learn Sass and how it generates CSS without knowing CSS, but it's a lot better to learn CSS first and then learn how Sass can help you to generate CSS. Just that I mentioned that I'm sure most of you already know CSS, and that's what you're here to learn how to write it more efficiently, but for those of you who don't know CSS at all or haven't spent a lot of time with it, I definitely recommend taking a step back. There are plenty of classes online. I have a class on Skillshare about HTML and CSS. So yeah, definitely recommend you know CSS before you start getting started with Sass. So with that out of the way, let's actually learn the first major feature of Sass and that is nesting. I'm going to go over here to the documentation, scroll down to nesting. As you can see here in this example that they've provided, we have got elements selectors here, and they're nested inside this nav element. What this is doing is going to prepend nav on the front of all these elements so that you can target them only when they exist within a nav. The other thing you'll notice about Sass is, there's no semicolons at the end of the styles, and there is no curly braces. Lot of people like writing code this way. This is all based on indentation. With CSS, we can bunch this all up into one line, but with Sass, we definitely have to have lines and indentation. Otherwise it won't know what to do, and we end up writing less code because we don't have those curly brackets or semicolons. But as you'll see very soon, this syntax is not the usual way people like to do it. We're going to move into SCSS shortly. But let's actually look at a different example right now. Let's just say for instance, we have a card element, and in that card element we have the card body, and in that body we might have a button that we want to target. All right, so doing this the Sass way, I can target the card body from within the card, like such. Let's just say that we want to have a background color of black and a color of white. Now the CSS is going to be generated and as you can see, it is prepended the card to the front there. But we can also go another layer deeper, and maybe we want to target a button element within that card body. Let's just alternate the colors here. I'm going to do color background white, and the color of black. Now you can see we've still got card prepended to card body, but we've also got our button element selected here with card body and card prepended to it. This comes really in handy when you're writing many deeply nested elements. If I was to write a list element for example, and maybe I want text transform uppercase. These are all just random styles, by the way, it's just to show you how it will be generated in CSS. You can see here that where repeating ourselves a lot by writing it in CSS. Well, instead of writing dot card, dot card body and digging into the element that way, like we would in CSS, we can instead create a tree of indentations and line breaks, and it will create it for us over there. That being said, we can also put in a style for card here. Maybe we want padding of ten pixels. We can put in our styles for that element. We can also nest other styles within it. Pretty cool. There's also this other feature in Sass that uses the ampersand to target pseudo-classes. A pseudo-class is when you have a colon after an element, and maybe it's the first child, maybe it's the hover state, maybe it's the after pseudo-class of that element. A common one is hover, and we've got a button right here going down here. We could write another little style rule here for the hover state of the button. Maybe we have a background color of gray instead of white. This is going to work, but we can actually do something a little sexier than that. What we can do is nest this inside and use an ampersand to access the parent or to reference the parent. Now we're going to indent that. Now it's going to generate and you can see that we don't have to repeat ourselves with using that element's selected button, we can use the ampersand. So a great use of the ampersand, as we see here, is targeting a pseudo-class of an element. We don't actually have to rewrite the element name. We can just nest it inside with that pseudo-class. We can also do it for modify classes. Say for instance we had a card body gray. Let's just say we use a system like BEM for writing classes, which I'll show you in just a sec. Let's just say we've got card, sorry, card body, and we use a modifier like gray. So we got a background color gray. Let's see what we get here. We've got card-body graze within cards. We want to give it a background color of gray. But as you can see here, we've repeated ourselves with the use of card-body. What we can do is replace this with an ampersand. Now right now this is sitting on the card, so you just need to indent it one more. Now you can see, we got the exact same result as before. This is what we had before. This is what we have now. As you can see, the exact same result. That's nesting. The next cool feature that we have in SSAS is variables. So variables are most commonly used for colors, but we can also use it for values like this padding, and it gives us an advantage of defining our colors once and then being able to change them in one place and for that change to go throughout the whole project. It also allows us to give names to things like, say for instance we wanted to call this medium padding. Well, we could set a variable up here. Let's just do this right now. Medium - padding 10 pixels, and then we can replace this value here with the variable. We're going to get the same result in our CSS. But, if we need to change this later, maybe we want a higher value for medium-padding, we can actually go in and change the variable here and anywhere in our document that references that variable. It will pull in the latest value from up here. Most frequently however you're going to see variables used for colors. Right here you can see we're using three different colors we've got black, white, and gray. Obviously the relationship between these colors needs to make sense because you have to have contrast and all that. What we can do up here is write some names for our colors and then we can use the variable instead of writing it explicitly in our document. I'm going to have color-bg-dark. This is going to allow us to change the dark background color right now it's black. But we can go in and change that later for all dark backgrounds if we so choose. I'm also going to have a color-bg -light, which will be white. There we got our light background and we've got our dark background. Also we're going to have color-text-light and color-text-dark. A very basic colors at the moment but we can go in and replace these with hex codes. Added benefit of using color variables is that we don't have to remember crazy hex codes. If instead of black another way of representing black is like that, you might have a crazier hex code then that may be something like this. I don't know it could be anything. But now that we've got our colors defined up here, we can now replace our explicit colors with these variable names. This background color is the dark background color, so I'm going to change this here, and this is the text-light right here. We want a light colored text on a dark colored background. Here we've got the light colored background and the dark text. We've got the opposite. We've also got this gray. I'm just going to call this color-secondary. We can replace that with color-secondary and color-secondary. I see that we are only using it as a background color so maybe I'll namespace it a bit by putting in background here, background-secondary. Once that recompiles which it does automatically, we will now see that we've got the exact same result in our CSS, but we've got variables here. Now what we can do, is we can change the dark background and it will update here. Maybe we want to use something hectic like this, hex code, and now you can see that the background color of dark we're actually only using it once here, but that's going to update. We can update this color-text-light, but perhaps this gray color would be a better one to update because we are using it in two places. Let's just change that to a light-gray instead. Now you can see anywhere where we're using that variable is being changed over here. Now this is of course handy when you want to change the overall look of your style sheet by changing variables or colors in one place. But it has the added benefit of giving you readable names to put into your color attributes, especially when you're using hex codes. There's been numerous times in projects where I've had to look up the hex code that I need to use for certain things. If I was using SSAS I could just name this primary color something like color-primary, and whenever I'm using that color throughout my document, I can just write color-primary instead of having to remember a hex code that's probably not going to be as simple as #000. That's another great benefit of variables. The next feature I want to show you, and let's just label these features now. This is course number 1, nesting, number 2 variables. Let's look at extend/inheritance. This third feature, we can go back to the docs, scroll down to extend/inheritance. Says this is one of the most useful features of SSAS. It allows you to share a set of CSS properties from one selected to another. I honestly don't think it's that useful and I'll show you why in just a second. But let's actually copy their example and I'll show you what it actually does here. Let's put their example right here. This here is an example of something that weren't get applied so I'm just going to remove that completely. The example I have here, a message. If we look down here the compiled CSS, we've got these four different message styles, which each share these three properties. But then depending on whether it's a success, it's an error or it's a warning message, we have different background or border colors. As you can see here, we're not even saving that much space by having SSAS. If you look here it's about the same amount of lines between the output CSS and the example here in SSAS. That's one reason why I'm not a big fan. The other reason why I'm not a big fan of extends is because I think that we can just use a secondary modifier class. What I mean by that, is instead of writing all of this, we just write a message with those properties. Then we can do all of these without the extension. Then all we need to do in our HTML, is make sure we include both classes. We include the message class, and we include the success error and warning class. To be clear, this is example from ssas-lang, and then my example right here. As you can see here, it produces a similar amount of lines for both. If you look at my example, it's a smaller amount aligns then from SSAS's website. Make your own judgments. But the only time I think it really makes sense to use extends in SSAS is when you have two elements that should look the same but you really want the class to be different. Maybe you have JavaScript attached to this element or maybe for whatever reason, it just makes more sense semantically to have the class different, but you want the styling the same. Well in that case, it definitely makes sense to use an extend. But it's rare that I have those situations so I'm more of a fan of writing a base class and then whenever I need to create an element, I can just have the message class and the success class on it. If I want to make this a bit more clear, I can have message--success, message--error, message--warning. As long as I put the class message and message--success on the element that I want to have the success message styles on, then I'll be fine. We can actually use an example of nesting here. We can use the ampersand instead here. This is another feature that I do enjoy of SSAS that we can use right here. We need to indent these as well. Then as you can see, that is a lot more compact than writing this. Make up your own minds. I don't feel like extend is that powerful, but it's there in case you do need to use it. Another thing you can do in SSAS is use operators. This is not particularly useful. EVA it's just a programming feature that you can use in SSAS. Let's create a new section for operators. Let me scroll down here to operators. Let's just take this example word for word and put it in our playground. The comments that you create here in SASS where it actually come through in your CSS. By the way, these standard CSS comments will. So this is the way you can make comments in CSS and SASS, but these are just pure SASS comments. So these won't actually come through in your final style sheet, just so you know. Looking at this example for operators, we've got our container with a width of 100 percent and we're actually doing some math here to figure out the width of the article and the aside next to it. As you can see, the output is the final percentage. If I removed this percentage from the end of here, you'll see that the numbers come up with the unit. So we need that percentage in there just to define the unit, but should be pretty clear what's going on here. We are taking absolute values of 600 into 960, and we're turning that into a percentage. Now these widths are responsive, instead of just 600 and 300 based on a container width of 960. If this container width was 960, then we could just remove this and it'd be the same. But if we want these containers to be responsive, then we should use percentages. This math here lets us use that. Again, not a critical feature of SASS. I don't find myself writing math much in SASS, but it's a cool feature that if you need it. Final feature that we'll talk about in this lesson and it's probably up there in the top three of cool features in SASS is mixins. Mixins are functions that you would see in a programming language, except we can use them in SASS. I'm just going to copy in an example here and then we can have a look at what it's doing here. I'm going to paste in this mixin code flex. This mixin just like a function in any programming language, takes an argument or a parameter. This variable will go into the mixin and can be used inside the mixin. Then here we're actually including the mixin. So let's have a look at what that results in over here. What we've got here is where placing this number of one inside our flexed element and we're throwing it into this almost like a generator, which is going to give us these four attributes with that number. O if I change it here to two you'll see it updates for all of them. So the benefit of this is say for instance, we weren't using this mixin and so we just had it like this. Now say for instance, something's changed and we want to use a different flex value. Well, we'd have to go in here, change it in four different places. Say three there, three there, three there. That is a little bit inefficient and we're repeating ourselves multiple times. Instead, what we could do is to final that in a mixin. We know that anytime we change flex, we want to change these prefixed versions as well to the exact same value. Why not use a mixin? We do that by putting in plus the name of the mixin and then we can pass that parameter in. Now, if we scroll down, we see we get the same result. As I showed you before, we just need to change one number and it will change it for all four. Now that's a quick introduction of mixins, obviously they're very powerful and we can use them for a variety of things. In the example, when we actually have a HTML webpage, I'm going to show you a really good use of mixins and practice. In fact, I'm going to show you practical uses of all these features in practice. But for this video, I just wanted to give you an overview of the features and a demonstration of what they actually do. Now there's one other feature here. We've done operators, extend and mixins, nesting variables. There's partials and modules here. We'll talk about that in a later video because we've only got one document here. We're not going to bring in partials, but partials, if we go back here, we can actually create partial SASS files that contain little snippets. We can modularize out SASS so we can put our variables in one file. We can put our extends even and then in one file, put on mixins in one file, and then we can bring them in. But we'll see that once we actually get SAS setup on our computer and start working with it. That is a quick introduction to SASS. If you want to learn more about it, what we've just covered, you can go to this page on the SASS website. One thing I want to do before we switch over to the next video and actually install SASS on your computer is I want to switch to SCSS. If I click this button here, now suddenly everything we've written is changed into SCSS. As we mentioned, SCSS is just like SASS, but for nesting we use the curly braces just like in CSS. We use semi-colons to define the end of a rule. Instead of equals and plus, we use more descriptive words like actually having an at mixin here and writing at include. The benefit of using SCSS is it's backwards compatible with CSS, so I can throw in normal CSS here and there won't be any issue, there won't be any error. Maybe I want to set a font family of Times New Roman on the body. As you can see here I may just have to put it in quotes. So as you can see here, it comes out the same way in your output CSS file. This is really good because you can take all of this that we've just generated and if I just get rid of what we have over here, and I throw this CSS word for word into our SASS, it doesn't come up with any errors in our CSS. So we can actually go in here and refactor this if we want. I can go in and do some nesting and you'll see we have the benefit of using SASS, but we also have the backwards compatibility with CSS. That's why most of the examples you'll see online use SCSS. For the rest of this class, we're going to use SCSS. SCSS stands for Sassy CSS, I believe. It's something that they developed after doing the initial traditional SASS syntax because they realized, I guess that it was better to have it look more like CSS. It makes it easier to write when you're used to writing CSS. Also as mentioned, it's backwards compatible so I can just throw any number of CSS into an SCSS file and it'll work. That's great in the case where I just want to write some CSS, but I only have an SCSS file. Both are going to work in the same file. There's a lot of benefits to using the SCSS version. As I just said, we're going to be using SCSS from now on. But for the most part, it should actually be easier to understand using SCSS because it does look more like CSS. You probably saw me before when I was writing SASS, I was getting into the habit of putting in semi-colons. I'm just used to writing things in CSS way. I think when using SASS, the SCSS syntax just makes more sense. I hope you enjoyed this introduction. In the next video, we're actually going to install some software on your computer and this software is going to compile SASS for us. I'm looking forward to that. I'll see you in the next video. 4. Setting up Sass on your computer: In the last lesson we used an online tool, SassMeister, to actually start running Sass in the Cloud super-fast without us having to install Sass on our computer. I wanted to do that fast so we could see the features of Sass, get a good introduction to it. But now it's time to actually install Sass on your computer so that you can actually run it in your own projects. We're actually going to use an example project from my GitHub page in just a second. But what I want you to do is click on this link for install, and let's learn about some of the ways we can run Sass. Now as you can see here, it gives us a bunch of different apps to look at. Unfortunately, Sass do not provide their own compiler, by the looks of things. We can use Sass on the command line, but in terms of applications, you've got a number of paid and open source options. The easiest way I've found to run Sass on your computer is by using Sass Live Compiler within VS Code. What is VS Code? Well, it's just a coding editor that is provided by Microsoft. It's actually free, which is pretty awesome. If I search for VS Code in Google, it's going to be the first link, and as you can see it stands for Visual Studio Code. It's a pretty good ID code editor completely free and has some great extensions in it. You don't necessarily have to use this code editor and this extension within it for this class. But there are so many different ways to do it, and this is the easiest way I've found. It's all free, as automatic as possible, so I definitely recommend it. I'm obviously on a Mac, so it's going to ask me to download for Mac, but you can choose which option you want to download here. I've already got it installed on my computer, so I don't need to do anything else. I've also got the Live Sass Compiler already installed. All you need to do for that is go to the Extensions tab of VS Code, type in live Sass compiler, and install the one here. Given that, you've installed VS Code, and you've got that extension installed as well, let's actually open up a project and see how this works. You can open up any project you want, or you can go to my GitHub page, github/christopherdodd/Skillshare. As it says here, resources for all my classes on Skillshare.com. If you've done a few of my other classes, you should be familiar with this repository. Right here I've included this one called Sass Class Project. I want you to download this one. I'm going to download it to my code directory here. Once that's finished downloading, we want to expand it. Now we can see it's expanded. We want to go into VS Code, open up that folder, a single click, and then click "Open". Get rid of that welcome screen. As you can see we've got two files here. An index, which holds our learning page, and our style sheet right here. We've got some responsive breakpoints down the bottom here, we've got some components and we've got our base and reset up here. Pretty basic. The first thing we want to do is click Go Live here, and that actually will create a automatic server for us using VS Code. I'm going to click that. Now you can see what our little website looks like. It's fully responsive. Obviously not the sexiest colors, and it's got some pretty bold claims here. It may or may not change your whole life. Obviously not a copywriter. But yeah, this is our project. If you look at it on iPhone, it's responsive. Yeah, this is what we're going to be working with in the next few videos. We've got a live server running, the next thing we want to do is start watching for Sass as well. Let's go into our CSS file, and let's write other styles. This is just to show you that we can get it to work. We've got other styles here and our code editor will automatically detect that we've now got an SCSS file, so have watched Sass down here. I'm going to create another link tag here just copying and pasting that other styles, we should call this other styles not other style, otherstyles.scss. Now you can see here we're going to include these styles here. We're also going to include otherstyles.css. But of course that file doesn't even exist yet. We've just got otherstyles.scss. Do we put that in there? Of course not, because we can't actually run SCSS in our browser. What's going to happen here when we run watch Sass, is that file is going to be generated for us using what's in here. Now because we haven't done anything in here, there's going to be nothing generated in here apart from a comment that says no CSS. Let's actually write some Sass. One basic feature is we can nest. Let's say inside body, inside card, and let's just do something dramatic like background color yellow important. If I save that, it's going to detect changes. What's going to happen over here? You can see that our CSS file is instantly generated. If we go back here, you can see here the yellow isn't coming through. That's because I have treated body as a class, not as an element. I save that it will refresh the Sass and now you can see the color of our cards is changed to yellow as you can see here. Cool. We can delete this at any point. It's not a big deal because anytime we save changes to our SCSS file, this gets regenerated. We only really need to manage the SCSS file. But of course the output CSS is what we use in our browser and we link to in our HTML. Let's just delete that one because that was just for demonstration purposes. I'm going to delete other styles and all references to it. I accidentally deleted the whole folder there. Nonetheless, we now have Sass running in our project, and it's automatically compiling our Sass and SCSS. Now of course, if you don't want to use VS Code and you want to use some code editor, you're going to have to look at a different solution. This is the easiest and obviously a completely free way of doing it. But you may have your preferences about how you want to set up your build tools. If you have your own preferences, unfortunately, I can't go through all the different ways for running Sass on your computer. Definitely, check out that website link. You've got a few options here, actually, I think is Koala and Scout-App free, and you can go to their website to figure out how to run them. But I've found that running Live Sass Compiler on VS Code is super-simple. All I need to do is just run this Watch Sass and it does the rest for me. If that all worked out for you and you've now got Sass compiling on your computer, then definitely it's time to head into the next video. In the next one we're going to actually start refactoring that CSS that I had before into SCSS. We're going to leverage some of those features I talked about in the previous lesson. I look forward to seeing you on the next one. 5. Converting CSS to SCSS: Sorry for the start of this lesson, I've brought us back to our original starting point within the Sass Class Project. I've gotten rid of that other styles.scss. We've just got our HTML file and then we've got the linked CSS file. Just like in the last video, we're going to click Go Live here on VS code to run the server, and now you can see our website is showing. What we're going to do is create a styles.scss file here. Here you can see VS code has acknowledged that we have an SCSS file, so we've got this Watch Sass button here. I'm going to first of all copy all, of these styles into our styles.scss. Save on both, and now I'm going to click ''Watch Sass''. Now you can see instantly we have generated our styles again, but using SCSS. As you can see here, there's actually a few other things that Live Sass compiler has added. Most notably we have got some cross-browser properties here. Display flex does not work on some browsers, so it automatically adds the WebKit and Microsoft version so that we can maximize browser compatibility. As you can see here, it's also added some attributes that were implied by our style sheet, that just made them very specific here. Apart from those changes, this is the exact same style sheet. If we go back into our website and we refresh the page, it should look exactly the same, and it does. What we can do now is we can close this styles.css. We don't need to look at it anymore, and we just want to work from this styles.scss file. All the changes we make here will be automatically compiled and placed into this styles.css file, and that's the file, of course, that our HTML document uses to style the webpage. But we don't need to concern ourselves with this generated CSS file. We can just work with the SCSS until there's an issue, in which case we want to have a look and see what CSS it's generating. But until that point we can just work completely in here. Now just like I showed you in our demonstration, the first thing I want to do is write some variables for the colors. It's best to do those at the top of your document. Instead of variables, I'm going to put colors. Let's have a look at what colors we're using, and let's give them names. Right here we've got a background color of blue. If I look at the document, the best way I can describe this blue color is it's the primary color. It's the one color that sticks out. We've just got black, white, which aren't really colors, and then we've got blue. I'm going to name this instead of blue, color background primary. Now let's create that variable up here, background color primary, and we can set it to blue. Let's go through and find other references to this background color blue. This one has a slightly different background color. Here you can see in the side header, we're using that blue. We can replace it with our newly created variable. Scrolling down, we can see the card has a background of blue. We can change that to color background primary. Wait, no that's the font color. We don't want to change that, and I think that might be it. If we save our document, refresh the page, you'll see nothing has changed. But as I showed you before, if we wanted to change this background color primary, maybe it's going to be a light blue instead, now you can see all the backgrounds have been changed. The next one I will change is the foreground color. Wherever there is a font color with white, I'm going to change that to color-font, let's say bright. Copy that. Write it up here. Let's make our bright font color white. Let's change that here as well, color-font-bright. Where else are we talking about white, we're also doing it here. Here as well for section-newsletter. Here as well, there's actually quite a few spots. The thing to remember here is not to just replace every time you see white, it has to make sense. What we're doing is we're describing the color here. It's important what this is called. This is our bright-font-color. For some reason throughout the web, you'll see that the convention is to write color and then write the descriptive words after it. You could always just put this in reverse, primary-background-color. It's up to you. This is how it's done by convention though. What other colors have we got here? We've got our body text color. So color-font, let's just call it primary, and it's going to be this particular hex code. I'm going to place that right at the top, and I'm going to just order them a little bit nicely by having the font colors first and then the background colors. Now we can replace this one here. This one we'll deal with a little later, and as you can see here we've got these background colors of black. I'm going to create a color-background-dark with value of black. Now when we have dark backgrounds, I'm going to replace it with my variable. Like such. Great. Now let's just check in with our document again, make sure we haven't made any big errors. Good. This font-primary, I don't think is the best name. I'm going to call it font-default instead. I want to keep primary describing this color here, the blue. I'm going to call that color-font-default. Again, how you name is up to you. But I noticed that pretty much all the text is either blue or white, with only this down the bottom, is that gray color, that triple seven color. I'm just going to call that font-default instead. I also noticed down here that we've got a font color of that blue. I want to call this one color-font-primary instead. I think that name makes a lot more sense. I'm going to go up here, color-font-primary, blue, and there's one more color here. We don't necessarily need to create color variables for all our colors, just where it makes sense. Here for the lights background, color-background-light. Well let's say bright for consistency sake, and let's go color-background-light. Now we've got our variables defined. I've actually got an error here in our Live Sass Compile console. Apparently we have an undefined variable of color-background-bright. Here we go. I accidentally called this light. You can call it bright or light, just something that describes it. Now it looks like we're good. If I refresh the page, it's all good. That's the other thing to note is that if there is a Sass error, it won't compile to the CSS file. When you refresh the page in your HTML document, you might not see a change, so you might think, oh yeah, it's working. But then you check here and you realize that it's actually not compiling the new changes. It's just showing an older version of the CSS file. What you want to do is periodically check down here, make sure that there's no Sass errors, and if you ever experience anything a little bit funky, you don't know what's going on, you can always check the output CSS and make sure it's coming across correctly. We've got our variables up here, and this makes it easier for us to do a bit of theming. Let's just say instead of having a black backgrounds, we want to create all the dark backgrounds to darkgrey, I think that's a color, and now you can see the contrast isn't the best, but we can actually affect all of the dark backgrounds in our CSS document. Hopefully it's becoming clear now the benefits of using variables. Number 1, we can change the variable in one place, and number 2, we just give the colors more of a descriptive name. Also number 3 is if we have a hex code like this, we don't have to remember the hex code every time we want to use that color, we can just use this name instead. Those are a few benefits of storing your colors in variables. Now as we saw before, we've got this extra color here, which is not assigned to a variable. The reason for that is this color is exactly blue but darker by 20 percent. It's exactly this color darkened by 20 percent. For this we can actually use a function. We've seen mixings in Sass, but there's actually some built-in functions as well. Let's actually go to the website and look this one up. I'm going to go over to the search box here. It doesn't matter which page you are on the Sass website and I'm going to search for darken. I'm going to click on the result for darken, and as you can see here, it takes as the first parameter a particular color, and then it takes as the second parameter how much you want to darken that color by. As you can see here, some examples, you can also desaturate, there's a lot of different functions. If you want to go check out this page, you can color, adjust in many different ways. But darken is a pretty easy one. I'm just going to take the color up here, the color background-primary, scroll back to where darken is, and the second parameter, I'm going to put 20 percent. Let's save. Now remember this is on a hover state, so if I go back to my web page, and refresh the page, we should see that same color darkening by 20 percent as I hover over the button, and reiterating this again, it's good to use a variable here, because if we change this background color primary to something else, like a light-blue for instance, and refresh the page. Unfortunately, we've got an error here, I have forgotten to put in my $ sign. If we refresh the page, you'll see that it darkens the default color of that button, so it reacts to whatever color is stored in that variable. If we didn't have a variable. Let's put this back to blue, and let's make sure there is $ signs in there. If we didn't use this function, and we just used what I had before. If we were to change the color of color background-primary to light blue, you'll see that it's still that same color that we specifically defined, so the darken function using a variable is a good way to get the same color as what you have stored in the variable, but just manipulated in a certain way. Going to rewrite this again, darken color, background-primary 20 percent, and it's also good to read as well. We can see that this is the color background-primary, but 20 percent darker. No matter what that color is, when you hover over it, it's going to d the colored by 20 percent, pretty cool. I'm going to change this back to blue because light blue is just too light, and we've got our blue color back. The next SAS feature I want to show you in this little project is extents. As I mentioned before, I'm not a big fan of extents. I think there's only a few situations in which you really need to use it. But we do have a situation down here with the buttons which we could refactor to use extents, so let's do that right now. If I go into my index.html, we can see what I've done is included two clauses on each button, so we've got our CTA button right here, and down here we've got our newsletter button. Instead of using extents, what I like to do is just add a base level class, so as you can see, they both have different class names in terms of one's newsletter underscore, underscore button, and the other one is CTA underscore, underscore button. But both of them have a second class on them, which gives them the base button styles. But the idea behind using an extent in SASS is that we only need to use one class, so if I just remove btn, the second class from both of these, and save that. Go back here, and you can see we've lost the base level styles for our buttons here. What I'm going to do is go back into our CSS file right here, and instead of having a class for button, I'm going to turn this into an extent, so right here, and for the hover state, I'm going to transform that into an extend, and then for each of those buttons, we can include that CSS, so down here in CTA button, I'm going to write extend btn, and then I'm going to do the same for the other newsletter button. I can extend it here. Save, refresh over here, or in fact it refreshed for us, and you can see we've got the exact same result as before. As you can see, we haven't really made much savings in terms of lines of code. But what we have done is reduced the amount of clauses that we need to use on a particular element. I don't necessarily think that's a big deal, but it definitely has its merits, and it's a feature of SAS that you may want to take advantage of. Let's just leave it with the SAS implementation for now. The final thing that this CSS file would really benefit from us and mixins. A great use of mixins is for creating your iron media queries. If I scroll down here, I've got media queries for multiple different screen sizes, and I've already labeled them with a variable that we're going to use in our mixins, so right here, this is the media query for wide screen sizes, and as you can see, I've got some styles in there. This is like medium screen sizes, desktop medium, and wide screen sizes. Just all of desktop screen sizes, then you've got tablet screen sizes, and mobile screen sizes. Some of these have styles in them, some of these edges definitions that I want to have that just in case I need to use them, but these are the breakpoints that I've set up. Now as you can see, we can always just, if we wanted to say, for instance, have a different style for code body through one of these breakpoints, we can just throw it in which we've done here actually on our tablet screen sizes, we've made the font size smaller on code body, but there is a better way of doing it with CSS, and that's what I want to show you in this video. What I'm going to do is, move all of these responsive breakpoints up to the top, and then we're going to transform them into SASS, so I'm going to create a comment here, media queries, and let's paste these up here. This is going to break it if we just save that and run it over here because of ordering our CSS, this is going to be ordered incorrectly, so we're going to start to see things. Maybe not, but there's a chance that it could break down because we changed the ordering. But what we're gonna do here is, we're not going to just leave these media queries up here. We're going to just have these up here for reference so that we can write our own mixins that generates media queries for us. There's a number of ways we could do this, we could create a mixins for every single break-point screen size, or we can create one and use an if statement to determine what screen widths to apply to, so I like the if then approach, so I am going to do that, and what that allows us to do is simply write a mixins code media query. I've seen this labeled as many different things in the past, you can call it responds to, or screen size, or whatever you want to call it. I like calling it media query because that's exactly what it is, and for the parameter, we're going to put in size. I'm going to open up this mixins, and I'm going to write my first if statement. As you can see here, I've already given names to all of these screen width ranges, so we can actually use that as our attribute here, so I'm going to create an if statement using the syntax here of, if size W equals desktop wide, we don't need to use the $ sign again, or put this in quotations, then we want the media query from here to apply. I'm just going to copy and paste that, and what we do to get the content to show inside here is to just put in this special content tag. You'll see how this works in just a sec. Now I'm going to create an else if statement, and if the size is going to be Desktop medium. Then, the media query I will use is this. Again, what we need to do close that off and put in content. The next breakpoint we're going to put in. We can actually get rid of this now because we don't actually have any styles in there. Let's do this desktop medium M-wide. I forgot to put the equals up here. Remember guys, you don't need to name these exactly the same way I've named mine. I have defined my breakpoints, how I like them. You don't have to use desktop medium M-wide in the specific screen widths. This is how I've set it up. You can use whatever you'd like right here. Content, so that one doesn't have any styles in it either so I'm just going to remove that one. Then we've got desktop, scrolling down, copying this again closing it off, making sure we've got that content tag in there. This one doesn't have any style rules in either, so I can just remove that. Then we've got tablet. Else if size equals, equals tablet. I am copying pasting that. In content tag, I won't delete that one because there is some styles in it and finally we've got our mobile breakpoint or screen size range. I'm going to write else if size equals equals mobile and throw in our last content tag there. Now, we've got all of these screen widths defined in this one media query. This is setting up the mixin. We haven't actually used it yet. Now, that we have them set up, we can actually use this mixin. You can see how this is going to streamline how we write media queries. What I'm going to do is I see here I've got a different style for the font size of the CTA heading when we're on desktop wide. Let me just take that font size. Let's go down and find CTA underscore underscore heading. Here we go. Here is the default font size. But of course we want it to show up five pixels bigger on a wide screens. What we can do here is use our newly created mixin. I'm going to write include. This is how you include a mixin. Include media query. I believe breakpoint was code desktop wide. There's the first one there and let's throw in that alternate font size. Save that, no errors in our console. Let's see if that actually worked. I'm going to open up our responsive tools and click on a very large screen size. This one is a very wide screen of more than 2,000 pixels. If I right click to inspect the CTA heading, you can see that that responsive style is now applying over the default. Toggling that on and off, you can see that on wider screens, we've made that CTA heading a little bit bigger. That works. Now, let's go through and refactor the rest of our code to use this media query mixin. We can remove this one now and for our newsletter heading, we're going to change the font size on desktop wide screens. Was it newsletter underscore underscore heading? Let's go down here and write" include media query desktop wide from another font size". Now, we can get rid of this media query altogether. Let's go down now to the tablet screen sizes. What we're doing here is on the tablet screen size. We're going to make the font size smaller on card underscore underscore body. Down here, cut underscore underscore body, going to throw in media query, believe it was tablet, and there you go. The font size will now be smaller for card body on tablet screen sizes. We can go back up here, remove this one. We can remove this comment as well. Now, we've just got our mobile screen sizes. A flex row, we're going to change the flex direction. Flex row "include media query mobile". You can see here this is a lot more readable. Here's the styles for flex row. This is what it has by default. But on a mobile screen size, we want the flex direction to be column. It's a lot nicer, I believe than writing out these over and over and over again. We've got how breakpoints defined and labels with nice names. We can just throw them in to the CSS inline and we have everything bundled up pretty nicely. I hope you're starting to see that now. Let's finish off the rest of these. We've got card not last child. We want the margin bottom to be 15 pixels, and we need to create a new one for this. Card, there we go, not last child, and then we will "include the media query mobile". The other way we could write this is like such. You could write it the other way round. But we're going to actually re-factor this using nesting in a second. I'm going to write it like this for now. I'm going to remove that. Now we've just got one last style. Site dash header underscore underscore title. I believe we don't have that one setup either. We're going to go site and then include media query mobile and give it that padding. Now, we can remove all of our media queries because it's all now handled by our mixin up here. Let's just save check how Sass console down here. Looking good. Refresh our page and we should now see that everything operates exactly the same. But it's just a lot nicer to read in terms of how we've written our code. It's a lot easier to manage as well. Here we go. Everything in terms of our responsiveness still working. We have fully leveraged the power of this mixin here. Now, the last feature I want to show you in this lesson is nesting. Obviously we saw nesting in the first lesson where we, tried it out in SassMeister, but here in an actual project, where can we actually find opportunities to nest? Well, in my particular project, what I've done is used a CSS naming convention code BEM. BEM stands for block element modifier. That's what these weird double underlines are in case you were wondering. If you use BEM, let's just look up BEM now. You can go to their website and learn how it works. I'm a big fan of BEM. I think it's great. But one of the features of BEM is it has nesting built in. In this particular project, I don't really need to nest because as you can see, the underscore is do the nesting for us. It's just all part of the naming convention. But what I'll do in a sec is I'll remove those BEM classes and we can see how we can use nesting in this project. In the case that you didn't actually want to use this BEM class naming convention. This website is getbem.com If you want to learn more about BEM, something that I've used for the last year and I really like, but not everyone is a fan of BEM. Definitely do your research on that one. One thing we can do despite using BEM in this project is use ampersands. There's a few places in our code here where using an ampersand makes a lot of sense. Let me go through and see where we are repeating ourselves. Here, we can see a classic example of where an ampersand makes sense. We've got our extend here, percentage sign, BTN defined twice. What we can do instead is we can copy everything after that second BTN, and then we can go inside the BTN rule and use an ampersand. Now we will get the exact same result. It's just nicer and cleaner. Let's go through again, see where else we can use it. If we wanted to, actually, we could go in here and nest like this. This doesn't add too much, but it is an option, so if I save that, refresh the page over here, we get the same result, so what we've done is we were already using the dot CTA up here, so what we can do is just move this into the CTA rule set and reference the name of the parents, by using that ampersand. Some people like it like this, some people don't really like it like this, so I'm going to put it back the way it was actually because I think it's a little bit more manageable like this, that the option is there to use ampersands when you're naming your classes in BEM as well, there is another example I saw earlier than I want to fix up here is this one. So where putting a pseudo-selector onto this card, so we really don't need another definition here, so what I'm going to do is use an ampersand and nest it inside that card component there. By save, refresh the page as this go on that mobile screen size to make sure it's working. Sorry, iPhone X, and if we inspect a card that is not the last child, which is either this one or this one, you can see that we've still got that style coming across using the ampersand, but obviously it doesn't apply to the last card. So as I mentioned before, this project uses BEM, so the nesting is taken care of for us by this convention with the double underscores, but let's say for instance, we removed all of the elements within our blocks. The cool concept in BEM is you've got your block right here, and then inside your block you've got elements. The way to name your elements is by prefixing them with the block name, followed by underscore. But let's just say we don't like BEM and we're just going to remove these completely. So I'm going to get rid of all these element level selectors, no more card body, no more card title, I might fast-forward through this because there's quite a few instances here, we're basically just taking away everything that is using that double underscores naming convention. I've removed all of the element level selectors apart from this one, and apart from this one right here, because this is a div within a div, so I'm just going to leave that one in here, you could also just name it like that as well. So let's save and refresh our page and we should see that our layout is now broken. So the layout is actually okay, but a lot of our styles are broken. Now, what we can do is use nesting instead of BEM. So right here for CTA heading, the heading that we had is just a h2. So instead of having CTA heading, what I can do is I can take all of this and just target the h2 element within our CTA. Same thing with button, our button is simply a, a tag. So I can go in here, copy all of this, and nest our rules for the a tag, in there. Now our CTA section should be back to what it was before, yeah now let's do the same thing with section newsletter, so we've got our newsletter heading right here, which is a h2, just like we did with the CTA section, so I'm going to take all of these styles right here and then nest it here. So any h2 within a newsletter div or a newsletter element will now have the styles. Same goes for newsletter form, so we can just target the actual form element here by it's element name rather than a particular clause, so form, and then same thing with input and button, so we can do input, button I believe was it was a button element, so we can just use an element selector here, move all of that, and let's see if our newsletter looks okay, yeah, looks exactly the way it was before, so I'm just going to fast forward now and do the rest consistency. This last card component example here is a perfect example of why I like to use BEM. You can see here that for our other ones, it was easy to target elements, specifically within our newsletter div and our CTA div, as they were all different element names. We've got h2, we've got paragraph tag, and we've got an a tag. Here in our newsletter, we've got a form, we've got an input tag, and we've got a button tag. The case in our cards is we're using divs inside our div. The clauses actually really helped to differentiate them. Instead, using this approach of not writing an extra class and using Sass, I'm writing something that's a little bit dirtier, which is targeting the divs by their position inside that card element. As you can see here, when you're just reading it, doesn't make as much sense as BEM class before, there are other options here, we don't need to remove all classes because classes are helpful, but a better example is right up here where let's say for instance, we didn't want to write a class name for some of these elements, and we can't target them by just the element name, we could always do this with Sass. That's an example right here of using that nesting feature. We've got our document exactly the same as before, but we've refactored it to use Sass. Hopefully you're starting to see now how we are using some of Sass' is features to write CSS in a easier and more succinct way. Perhaps on a small project like this, the benefits are particularly clear, but when you have a CSS file of many thousands of lines, then this structure and having features like mixins and variables become very important. There is one more feature that I want to show you in Sass however, and that is partials. So we can actually split up parts of our SCSS file here into different files and bring them in when needed. But for that, I'm going to wait for the next video in which we're going to look at modularizing our SCSS file. I'll see you in the next video. 6. Writing modular Sass: In this lesson, we're going to talk about modularizing our [inaudible] document into different, what's called partials in SASS. This is part of a bigger topic around CSS architecture, which in our case here, running an SCSS file, we've under 200 lines, isn't a huge deal, but it becomes a very big deal as to how you structure your SASS projects when you start to have style sheets that are thousands and thousands of lines long. So we could have easily just covered this in the previous lesson as an extra feature and way to refactor CSS, but I wanted to give it a dedicated lesson here because, it's a topic that should be considered in itself. So what I'm going to do is, we're first going to modularize our document and then we're going to see how we might do it for a larger project. All right. So how we make a partial in SASS, is we create a new file and we make sure that file starts with an underscore. So a common partial to start with is putting out variables in its iron partial. So I'm going to have a partial with the name of variables.scss. So what I'm going to do, take all of our colors, move them into here. Now if we go back to our document here, you'll see that nothing's changed. But if we go down here, you'll see that it hasn't actually compiled the new CSS document because it's missing all these color variables. So we have to actually import this partial into this document, and the way we do that, is by putting in an import statement here, and all we need to do is open up some quotation marks, input variables in. We don't actually have to put the underscore or the dot SCSS on the end. If I scroll down, you'll see that we're all good. Refresh the page. We're all good. So right now we have the exact same output. We're just modularizing our SCSS so that it's organized in different compartments. The next thing is the mixins. So I'm going to create a partial quote underscore mixins.scss. Then let's do the same thing with our media query mixin. So I'm going to write, import mixins, save that, and then bring this over here. Look down at L SASS console, no issues detected, and if we refresh the page and start to move around our responsive breakpoints, I can see one issue, and that is from the previous lesson where we forgot to target this H1. So I'll just correct that right now. We still have side header title here. So instead of that because we're not using BM anymore, we're just going to target the element, and we're going to obviously harness that in there. Saving that, will now see that. We've got the same exact results, but we now have a mixins and variables compartmentalized in their own little SCSS files. We can also take this a bit further and put our base styles in a partial as well. So our base styles, stuff that affects the whole CSS document and forms the foundation of our styles. So in this case it would be L Asterix, and L body. So I'm going to throw that in here and import base. Another partial we could make our L layout elements, so, we've got flex row, page width, and text center. A text center actually is more of a utility, I believe than a layout. So let's just take these two and create a partial for them. The order at which you do this doesn't really matter. So I'm going to call this layout, and then I'm going to create it, underscore layout.SCSS. This is all up to you how you want to do this by the way. I'm following convention right now, and we'll see in the next video actually how Bootstrap, a popular CSS framework does it, but right now I'm putting my page with MI flex drier in the layout partial right here. So as you can see, refreshing the page, we've got the same result. We can also put L components in their own partial. So I'm going to take all of this and put that in a partial by the name of components. Let's create a new file for that one, CSS. Honestly we could go all the way until all of these are in their own partials, but we don't need to go too crazy. I believe actually we should have button, is a particular component, so, we should put that in here as well. So we got the card component and the button component. Refresh the page on this one. Everything still appears to be working and we've got no SASS errors. All right. Now what we've done, is we've broken up our styles.scss file into multiple files, and it just makes it easier. If we're looking for a component, we can go into components, if we're looking for base styles, we can go in there, looking for mixins here, variables here, so on, so forth. Now, as I mentioned with a small project like this, this isn't that important. I would definitely put your variables and mixins into their own partial, but to break things down into components, into layout and base, on as essential as it might be in a very big project. So as I mentioned, there's a few conventions to follow or to not follow. If you do end up expanding on your style sheet or working on a big, big project. One of these conventions is called the 7-1 architecture. If I just search for that in Google, you can see here there's a page on GitHub about SASS 7-1, there's also many articles on the subject, but you can see here an example of the 7 -1 patent. So as you saw in our document here, we just made one partial for base, we made one partial for components, one partial for layout. But if you had an even bigger project, those components, layouts and base, that could be an actual folder, and then you could have partials within it. So for instance, I could transform my component's partial into different components within a component's directory. So I could go in here, and instead of having this called components, I could have it called card, and I could place that inside the components directory. Yes, I'm sure I want to move, and then of course we've also got a button in here, so, we don't want that, so, move that out of here, create a new partial within our components directory for button like such, and then we can either include both of these, like such, or if we wanted to, we could create another SCSS file inside here and import our various components into that one file, and then import that file into the main style sheet. Again, that would be overkill for this kind of project, but when you're working on larger scale applications, you're definitely going to need to understand how to structure your CSS better. It's not uncommon when you're working on a big app to see photos and photos of various different components. We'll actually see in the next lesson using Bootstrap, how many different SCSS files are in that framework. So you'll see a live example in the next video. So right now that's all I want to do with modularizing our project here. As mentioned, it's pretty small projects, so, we don't need to do much of this, but it's another cool feature of SASS and becomes very important as mentioned when writing big applications. So in the next video, we're going to look at Bootstrap. Bootstrap is a CSS framework that uses SASS, and we can actually see how a proper SASS framework is structured. It will bring together some of the concepts we've learned in this class. Also we're going to learn how we can actually use Bootstrap, and I'll new knowledge of SASS to actually modify Bootstrap and do what's called custom theming. So I'm excited for that lesson. I'll see you in the next video. 7. Bonus: Using Sass with Bootstrap: In this lesson, we're going to extend what we've just learned into working with a highly popular CSS framework such as Bootstrap. Before this, you may have worked with Bootstrap in the past, but you may have used this CSS version. Well, now that we know Sass, we can actually use the Sass version of Bootstrap and we can actually get a lot more out of it. If you're not familiar with Bootstrap, you can come here to the website at getbootstrap.com. You can think of it as a set of predefined styles that you can just quickly load into your document. It also has JavaScript, but that is not the focus of today's class. You can see here some examples of Bootstrap websites. It'll probably look a lot similar to some of the websites you've seen on the web already. If we look at this example, you can see a lot of Bootstrap elements. Basically, all that's required in order to get that look is to use the right classes. If I go into documentation and then into components, you can literally copy and paste some of the code here. As long as you've included the style sheet for Bootstrap, you'll get the exact same look as this. What I've done for this lesson is I've actually re-factored the little project we were working on in previous lessons to use Bootstrap elements. As always, all you need to do to access this project, is to go to github.com/christopherdodd/skillshare. As you can see here, I've included this example Bootstrap project for us to use in this lesson. I'm going to save that to my code folder. I'm going to come up right here and I can just click to expand it. Just going to resize some windows here to make it easier for you to see. Now, we have our example Bootstrap project there. What I'm going to do is open up VS code again. Let's open up that folder. Example, Bootstrap project. Let's get rid of that welcome screen and have a look at our project. First things first, let's actually go live with this so we can see it in our browser. As you can see here, it's a similar design to our project before, but what I've done is I've just changed it to use Bootstrap. We've got the Bootstrap elements in there, but it's pretty much the exact same layout as before. We can close this down once we have successfully got our project set up. Let's have a look at the code. In our index file, as I said, similar code, but we're using all of the Bootstrap classes here. There are some custom ones that I have included in my own style sheet right here. These are modifications on top of Bootstrap. We've got Bootstrap here and we've got the compiled version of this SCSS file and in a index.html. You can see we're including Bootstrap first and then we're including our styles. I just like always we can run "Watch Sass." We could make more changes in here.. Then once we save, it will recompile to this style sheet right here. Right here we've got Bootstrap working. We can actually override Bootstrap by rewriting the class definitions here. As you can see here, I've changed row to have no margin because it was giving me issues. If I just switch over to the SCSS file and I comment that out, you'll see that if I open up my developer tools and go down to a smaller screen size, the negative margins on the rows was giving me a hard time. Actually came in and overrode those styles. As you can see here, it's looking in a lot nicer without those negative margins. Don't get me wrong. This is a perfectly okay way of doing it with just CSS. We don't even need SCSS in this instance because I'm actually not writing anything other than plain old CSS in here. As you can see, this is the pretty much the exact same file. In fact, I think it is the exact same code. We don't actually need SCSS in this instance. But what we can do to number 1, see how a large-scale Sass framework is structured and at the same time leverage some of the features of Sass, we can actually include the Sass code from Bootstrap. Let's do that right now. I'm going to head back to the Bootstrap website. Let's go to ''Home'' and then click ''Download.'' Right here you can see I was just using the compiled CSS. But what I can do instead is download the source code. I'm going to click ''Download Source.'' I'm going to put that just on my desktop. I'm going to expand to that. Now, I can go to my desktop and open up ''Bootstrap 4.4.1.'' The number is probably going to be different depending on when you're watching this course. But at the current time, that is the latest Bootstrap version. You can see here there's a lot of different code. Inside this dist folder, for instance, we've got the compiled CSS and also the compiled JavaScript. But what we're looking for is the SCSS right here in this SCSS folder. As you can see here, we've got a range of different partials. Then we've got these three that give us the ''Bootstrap-grid'', the ''Bootstrap-reboot'', and the ''Co-op Bootstrap.'' We've also got folders for mix-ins, utilities, and vendor. What I want to do is let's open up our example Bootstrap project over here. Let's create a folder structure to hold this Bootstrap code. I'm going to create a vendor folder. Inside this vendor folder, I'm going to create a folder called Bootstrap. Then inside Bootstrap, I'm going to call this SCSS. Then finally, now, it's time to bring in all of the files within that SCSS folder into our own projects. There you go. If I go back to my code editor now, you can see we've got the vendor folder and inside we've got vendor, Bootstrap, SCSS. We've got all the SCSS files here. Now, this is an important structure to look at and study if you want to know more about structuring large-scale applications. We've got all the different mix-ins in different partials right here. It's highly [inaudible] and we are including all of it in this final Bootstrap SCSS file, which is basically just a bunch of inputs. I encourage you to take a look around and notice what's going on here. But after you've done that, we can actually go and edit this Bootstrap file to eliminate some of the things we don't need and also edit some of the things we want changed. The benefit of doing it this way is we can reduce the amount of lines that ends up in our final bootstrap.css file. We can also change variables before they get used in the CSS. It's actually a pretty good system and something to definitely take advantage of if you know how to do it and you are looking for extra efficiencies. Before we actually make changes to this file, however, we're going to have to reconfigure how our live Sass compiler works. Remember before we just had one folder and so the output file would just go right next to our SCSS file in that output folder. Well, it's a bit different now because we have a folder just for SCSS. We also have our Bootstrap specific SCSS stored in this folder. We're actually going to need to do a little bit of configuration to make sure that all of our CSS, no matter where the SCSS files are located in our project, who ends up in this directory right here. In order to do that, we need to go into the user settings of our VS Code application. I'm going to go into code of preferences settings. Then I'm going to search for a live Sass compiler. There we go. Now, we want to go down to here and we want to edit our formats. Also we want to change whether it generates the map file. We can edit, as it says here in settings.json. I'm gonna click that. As you can see here, I've already got my code set up. This first little block here is for setting our formats, and I have given it the savePath of./css. That's going to take our CSS files and make sure that they go in this folder here. What I've also done is made an excluded lists. I'm going to exclude Bootstrap grid and Bootstrap reboot. If I just remove this, actually lets remove this which generates the map file as well. Let's save that. If I hit "Watch Sass", you'll see we get Bootstrap-grid, Bootstrap-grid.css.map, bootstrap-reboot, bootstrap-reboot.css.map, bootstrap.css.map, style.css.map. We really don't need that many CSS files, so it's still going to work with just this here. But what I like to do is exclude those files and also not generate the map. What we can do here is we can delete all of our CSS here because we're using SCSS completely in this project. I'm going to move all of that to the trash. Going to save this. Then let's just trigger our Sass compiler again. Think we may need to restart. Let's just turn that off and click "Watch Sass." Now you can see it's just generating the one bootstrap.css file, just like we had before. So if we go back to our web page, everything's working normally. The first thing we can do to reduce the amount of lines in a bootstrap.css file. If we scroll down to the end, we can see this is over 10,000 lines of bootstrap CSS. Most of the time, we don't actually need all of what bootstrap has to offer. One of the benefits of using the SCSS version of bootstrap is we can start to remove some of these imports. What we can do is a process of elimination to removing stuff and seeing if it breaks our web page. But what I would like to do instead is the reverse of that. A reverse process of elimination where we reintroduce some of these imports. What I'm going to do is comment all of these out so that none of them run and if I refresh the page over here, you can see we've lost all of our styles. Let's start to re-introduce some of these parts of bootstrap until we get the look that we're going for. We're definitely going to need functions, variables, and mixins. These are compulsory in bootstrap and these aren't probably going to make any difference to our web page. But they just provide the functions, the variables, and mixins that are used throughout the rest of these partials right here. We're going to want to include route. We're going to want to include grid forms. We definitely use buttons we have used, what else have we used? Nav and navbar. Let's just do navbar for now, we've used cards. If you want to check what we've used at any point, you can just go into index.html and you can see some of the elements that were using, such as navbar cards right here. It's all there in the html. I'm going to go back here. We're not using pagination. We are using the jumbotron. What else are we using? Utilities are probably going to be something that we need. As you can see, we still got a lot commented out. I'm going to save that. Go back to here and you can see we're already a little bit closer. We've got a lot of those elements, but we're still missing some important stuff. I'm going to include reboot and type, which has out typography styles in it and let's refresh the page. Now you can see with reboot and type that we actually have pretty much all the styles we need. I don't think there's any thing necessarily missing here. It works on mobile. Let's go in and have a look at our final bootstrap.css file here. You can see here it's just over seven thousand lines of code. We've reduced it by 3,000 lines of code, which is pretty good. It means the file size is going to be smaller. It's just more efficient in general to only use what you need. With a framework like Bootstrap that's so fully featured and has so much in it, there's a chance that we could really increase our project size without needing to. This is one of the benefits that using the SCSS version of Bootstrap provides us. The other benefit, of course, is Bootstrap theming. What I mean by that is if we go into say, the variables in our underscore variables file, and I have to scroll all the way down. Here we go. You can see that all of our colors are defined with a exclamation mark default modifier at the end. What this does is it only creates a variable with this blue color if a variable by the name of blue doesn't already exist. What this means is that we can easily modify these, override them by defining the variables ourselves. These are just the defaults, but we can actually go in and change the color blue throughout the entirety of bootstrap by just going into here and changing the color blue. Let's actually look at the section of the bootstrap website that talks about bootstrap theming. If I search for theming here, we can see theming bootstrap. As it says here, customized Bootstrap 4 with our new built-in Sass variables for global style preferences, for easy theming and component changes. As you can see here, it's showing you what you need to import as a bare minimum. These are required. Remember up here, functions, variables and mixins. Let's actually create a space in between them so you can see that these are required. Also going to label them like this required and then reboot, type, images, code, grid. These are all optional. We need root, reboot, and type, but we don't need images as of yet. Because we don't have any images in our particular project. But those are optional as well and as it says here with that set-up in place, you can begin to modify any of the Sass variables and column maps within a custom.scss file. But I think it's easy enough and safe enough just to create our customizations here. We could always create our own custom.scss and then import this file into that. But with such a small file already, I don't think it's going to harm us to modify this bootstrap file. Let's go in and actually start to theme this bootstrap file and change something that exists in our bootstrap files. There's a lot of different options here and different examples that you can find on this page on getting started slash theming. So many different options. But something that's really simple to do is change a color. Let's have a look at what colors we're using here. We're using this button primary right here. Let's dive into the index.html right here, as you can see here, we are using the button primary class. That's going to probably be in the component for buttons. Scrolling down and up here, we can find buttons here and we've got our button base styles. We can scroll down till we find button primary or you can search for it. Nothing for button primary. What about if we search for primary? Nothing there either. I think the reason why is because we're using maps and for loops. So what we're looking for is the primary color. It's pretty safe to assume that that is what is used within button primary. Let me go back to the variables and let's look for primary. As you can see here, the color for primary is going to be this color blue and if we look at the definition for this blue, it is set to a default of this color right here. Which of course matches this color right here. What we can do is actually go in and change that primary color. Maybe we change it to a yellow instead. If I save that, come back over here, you'll now see that the primary color throughout the whole of our project is now changed to yellow. But of course we don't want to change it right here. We actually just want to override it in our final bootstrap file. We can do that from anywhere in here. Call this variables, and I'm going to override the color of primary by calling it yellow and same result. You want to keep the variables file clean, keep all these defaults in there and any of our modifications we want to put in the one file. Again, we can put it right here in our bootstrap.scss file. Or we can create a custom.scss file and then import this file into it. That's one example. I'm not sure what other things you might want to do. The possibilities really are endless, it's up to you what you want to change. We could change any one of these variables and it would propagate to everywhere that that variable is used in our project throughout bootstrap, and then that would apply to our own style sheet. Very powerful feature within bootstrap. You can always do the CSS implementation and you can override things like this. But if you want to get to the source of how bootstrap is generated, you can come here, reduce the number of things you're importing, and actually modify variables from within this file. Very cool. That concludes this lesson on bootstrap and using bootstrap's scss form. I hope that you are feeling a little bit more confident with scss now. Obviously, as you code more of it and get used to it, you're going to start to get more comfortable with it. Eventually, I'm sure that you're not going to want to go back to coding the old way with CSS. Sometimes if you just need to make a small change, CSS is fine. But as you'll see, when you get into bigger and bigger projects, you're going to need to use something like SASS. Otherwise, it's just going to get way too messy. I hope you enjoyed this lesson and the next video we're going to wrap up and talk about your class project. I'll see you in the next one. 8. Conclusion and Class Project: In this class, we've covered a good overview of the capabilities of SaSS and how using this language can totally transform how you write CSS. While there are a bunch of other features within SaSS, what we've covered in this class is enough for you to harness the power of this awesome language. I must admit it took me a long time to start adopting SaSS in my own workflow. But with tools like live SaSS compiler, it doesn't take too long to set your project up to take advantage of all the benefits of SaSS. What I want you to do for your class project is migrate some existing code from CSS to SCSS, just like we've done in this class. Ideally, this would be a web project you're already working on, but if you don't have your own project, feel free to use the projects we worked on in this class. All the code, as always, will be at my Skillshare repository at github.com/christopherdodd/Skillshare. Finally, if you need any tips or guidance on what we've covered in today's class, be sure to leave a comment in the discussion box below, and I'll do my best to point you in the right direction. Thanks, as always, for watching and I hope to see you again on some of my other classes.