SASS: Superchage Your CSS | Chris Worfolk | Skillshare

SASS: Superchage Your CSS

Chris Worfolk

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
31 Lessons (1h 2m) View My Notes
    • 1. Introduction

    • 2. Why use SASS?

    • 3. Alternatives

    • 4. Installing SASS

    • 5. Installing on Mac

    • 6. Installing on Windows

    • 7. Creating our first stylesheet

    • 8. What are maps?

    • 9. Watching files

    • 10. Watching directories

    • 11. Modules

    • 12. Partials

    • 13. Use vs import


    • 15. Nesting

    • 16. Variables

    • 17. Inheritance

    • 18. Mixins

    • 19. Exploring project 3

    • 20. Operators

    • 21. Built-in modules

    • 22. Flow control

    • 23. Error handling

    • 24. Debugging

    • 25. Forwarding

    • 26. Coding challenge

    • 27. Example solution

    • 28. Deployment

    • 29. Compression

    • 30. Source maps

    • 31. Final thoughts


About This Class

SASS is a preprocessor that turns CSS into a programming language. You can use includes, variables, reuse bits of code, add logic and functions, and much more.

Using SASS allows you to develop cleaner, well-organised code that is easy to update and maintain.

In this class, you will learn how to use SASS. We'll start with a tour of the functionality before moving onto a project to put those skills into action. You can code along to pick up some real-world experience.


1. Introduction: Welcome to this class. Bond sloughs, the CSS pre-processor, soft speech, CSS on steroids allows us to do cool things that we would do in programming, but in CSS. So that's things like reusing bits of code using variables, even control-flow and functions are all in here. And once you fall in love with SAS, which I'm showing you well, it's almost impossible to go back to plain old CSS because it makes your job so much harder. I'm quests. I've been a software consultant for 15 years now and I can't wait to teach all of that. So let's dive in. 2. Why use SASS?: You probably have a good idea about what such as already, but in this lesson, we'll look at some of the reasons to use it. So SAS is a style sheet pre-processors. So juts like programming languages prepare HTML pages ready for the browser. Sass allows us to code CFS and easier way and then have it compiled ready so the browser can understand it. And we write SAS in files called SCSS files. And then they get translated into actual CSS. But it looks very similar, just with a lot of easy convenient features to use. And this happens at build time, so it's not done on the server, will do that in development or why our staffs will compile it to CSS and then we'll ship it to production or we'll compile the CSS as part of shipping it to production. And it looks a lot like CSS, except we can do some cool things like we can have variables here. I'm using a primary color variable, and I'm also nesting the tags inside each of us. So in classic flat CSS, we'd have to make separate declarations, whereas in SAS I can nest them. And we'll go through each of the features throughout this course. What's the advantage of using sacks? While the key advantages I think is worn organization. You can do that nice nesting, but you can also split all of your CSR into separate files, into little modules that each component has its own file and then it's all brought together at build time so that we've just got them one CSS file to shit to the browser. Rather than having to include ten different files. We can avoid a lot of duplication because we can reuse code. We can say, OK, I want these four attributes to apply to free tags. Or we can create little inheritance and mixins which are like little functions of reusable code that we can drag it into stop our selves having to repeat the code that we need to do. This also reduces the amount of code we need to write because we don't constantly have this duplication and we can do more efficient things like the nesting, which also helps with the speed, because we're not constantly having to buy every separate declaration out. And if we using things like variables, if we do want to change things like heights and color schemes, we just have to change that in one place and it changes everywhere. And then with fast, it's really easy because we're compiling our CSS already to compress CSS. Now of course you can take your Gila flats ASF and we went through compressor. And you should do that. If you're publishing website, you want to be fast. But because we're already doing that in SAS, it's super easy to turn on. It's just one argument in the command line. And suddenly we have compressed CSS basically for free. 3. Alternatives: Using Sachs is my favorite way to build websites and to write CSS. But to make sure you've got a full rounded picture, I want to go into some of the alternatives to SAS. So it also a very similar language called Les. And this looks almost the same assassins, some slight differences, but is still quite popular. He used to be war bootstrapped was written when they made the jump over from less to SAS. But it does a very similar thing and it looks like SaaS. Then you've got stylus, which is an of a preprocessor. That was, they kinda took Less and Sass and thought we can do something similar but better. It's not as popular as SAS is a bit more Python like and it hasn't caught on as much. I'd have many see as a, as an improvement. But you might want to check the arrow and have a look. Then we've got things like styled components. So this is the idea that in a component world where we're all right in, especially in javascript, who are in these little components, that rather than having all components in our CSS, we should actually move those styles into that components. So when you bring in a button, you don't then have to go off and import the style sheet for that button. Egypt's get everything in a wooden component is very popular in the React world, but it is not limited to react. You can use it in any kind of component world. So that's something that's going to continue to develop in the future. I think. There's compass, which is a CSS framework. So this uses sass and gives you a bunch of styles out of the box. So you can bring it in. And it's kind of like using a framework. So if you think about, if you are building a website, you probably using website will be written in a certain kind of programming language, but then you'll also probably use a framework to deal with a lot of the heavy lifting for you and compensate. Those are in terms of bringing in things like generic styles and resets and a load of useful functionality. You can build a NAT. And then going even forever. From that, we've got Bootstrap, which is Twitter's CSS framework. And this is great for really quickly building out something like an admin panel where you don't want fancy custom stylings like you might want on public facing website, you want to build something really function and really quick. And you can import the bootstrap styles and looks great. And you don't even write your own CSS, you use the Bootstrap CSS. So mean like compasses, an intermediate where it gives you a load of CSS and UI around. And then we've got bam, which is not framework at all. It's just a naming convention that's often used in CSS when you might say Those kind of block object modifier. So you get three different names and they'd have a bunch of underscores and dashes between them. If you see that and not clear what that is and wondering what is the naps, bam, that's a naming convention that a lot of frameworks and libraries have adopted for naming nasa such projects. So there's a lot of alternatives to SAS. But Sachs is the biggest. Sas is the market leader and it's the one that I would personally recommend. 4. Installing SASS: Let's start by installing the SaaS library. So we'll start by going to the SAS website on, hey, we can just get to this install. And on the right here, we can find the links to the install paths. The easiest way to get the latest version, which is sas dot, is follow this link here to the GitHub. And you'll be able to download it for Windows, Mac, or Linux depending on what platform you're on. The other thing that you need to do is and wherever you saved this to, to your path. Now again, that will depend on whether you are on Windows, Mac, or Linux. But sacks have provided some instructions here on how to do that. So we just find your relevant operating system and follow the steps through. Once you've done all of this, then you should be able to access SAAS on the command line. So you've lent it to go here and do a SaaS version. And if that comes back with a version number, then you know, you've managed to install it successfully. 5. Installing on Mac: Let's run through an example of how we'd installed a Mac. So we'll go ahead and we'll download this. And this can really go anywhere. I'm going to put it in my software folder. And then we'll come into Finder. And here we go, it will just extract VS. And we can get rid of that. So I've now got this. Here's our executable. And we also need the source folder because that contains dealt as well. And then we're going to come over to the terminal at this into our path. So let's just create a new tab and go to the home directory. And hey, we're in to.bash_profile. Cite those, just make a comment, say Sass here. X bought a path is a path. And then I've studied and uses Chris software. That's double-check this path to make software dots IS okay, nice. And we'll just run sauce not.bash_profile so that reloads the changes we just made into a terminal. And now fingers crossed if we do Sass version. Yep, great. We've got the latest sacks and we are permanent and ready to go. 7. Creating our first stylesheet: Let's write our first Sachs file. So in the example code hopefully you've downloaded, we can go into Project one. And we can see we've got this Getting Started file. And if we look at what's in that, once I open this up in the browser. And the moment, it's just a hello world, there's nothing exciting. So let's add some exciting things. So nice juts script out a very simple piece of SAS will use some nesting. And we'll set the color to blue and also the font size to 200%. We'll call S Getting Started, dot SCSS. We'll go ahead and we'll save that in hedge Center Project one. So we're using the SESS file extension, which is a bit confusing because it's called SAS, but we use SCSS as the file extension. But that's just how it works. And then once we've got that and then we can come over to our terminal here, will go into that one. So here we can see we've got a Getting Started, CSS and we've got HTML. And I'm won't just ruin SAS getting dash dot, dot SCSS. So that's the input filename. And then we'll tell SAS with output it. So we're going to output it to Getting Started dot CSS, which is all compiled CSS file. And if we, now we've got these new files generated, we call this Getting Started, which you look is a compiled version. So here we're using the SSAS form of nesting off pay. So rather than saying body pay when nesting things inside each of whom, we'll talk more about why we will do that later. But hey, we've got our compiled version where Sachs has changed into regular CSS. And if we refresh our page, perfect, we've now got our nice PIG blue helloworld message. 8. What are maps?: So alongside our compiled CSS, we also have this CSS map file, which looks a bit confusing. It's just big JSON string. What does that do? Well, if we open up our developer tools. So you can do this in whatever browser I'm using. Chrome, Hebb equally. Firefox, Edge and Safari all have developed tools. But if we just inspect this p tag and we take a look at the CSS. One of the problems is that if we had a huge compiled CSS file with a map, everything would say it was in the actual CSS. But if we wanted to edit that, we don't need to come to, hey, we need to come to this SESS file to actually make our change. So the map tells us where it is in the actual SCSS files. So if we just get rid of that and just do a refresh, Haha. Now we see it's showing up in this game in the compiled version, the getting started. And that's no help at all for working out that we need to go into it here. But with the map in place. Then if we look at where this is defined, it's actually giving us the original CSS file. So that when we want to go edit this, we know that we need to go here and then it will be recompiled into here. So it tells our browser tools to find it. It's totally fine to ship these to production. You may not want to, but it's, it's CSS. So it's not really a security risk because you're only shipping code that's already available to the browser. 9. Watching files: So we've got our first satisfy working here. But what happens if we want it to change this a, we wanted to make the text green. Will a moment, nothing's going to happen. And it would be a pain to have to go back here and run this SAS command every time. Luckily, we don't have to. We can use the watch function. So we'll add dash Jack's watch. And then we'll specify the same options. And now it will watch for changes in sass files and it will automatically recompile. So it should have done that already. Perfect. And then if we go in again, let's see if we can have the terminal end view as well. So we can say that updating, I'm gonna change this to red. And we can see it's compiled again without us having to run the command. And then we gotta take some update to read again. And if we wanted, we could just change back to blue. And again, it will automatically compile. Now if for any reason you don't see your changes update so you change a file, nothing changes here. It's always worth checking the terminal to see if you're getting an error. Because if I was to break something, then it would suddenly stop compiling. And it gives us quite a nice error message troubleshoot that down as well. So if you do find it stopped updating for some reason, first thing to do is check the console and make sure there were no errors. 10. Watching directories: Watching individual files is one thing. But most of the time we have a whole directory full of CSS files, and we'd certainly like to organize it that way if we want to break things down into more manageable chunks. So let's look how we can do that. Let's start by opening up this project to that we've got here and the light benign the browser as well. So in the moment it's then unstyled page, we can have an open here as well as project two. And we've just got some basic HTML here that we can style. Let's go ahead and create a screen file. So let's just start by changing the font. We use Helvetica. And we'll save this is screened CSS in SaaS file. Okay, and then over here we'll come to our terminal and let's go to the project to directory. And we'll run SAS and want. And this time, instead of passing in, filenames will pass in directories. So I'll input directory is the SaaS directory, which is here. And then we want that outputting to a CSS directory. Okay, great. So and that's rodent decompilation. And we've set Watch as well. And we can now see we've got the CSS directory. Great. Html's already pointed to are screened CSS ourself, and advanced. So we should now have the Helvetica font used on the project. And let's take a look. And then we go perfect. So now we've got it working. We're watching that entire directory and any changes we make in this SaaS directory here will automatically be processed and update it onto the page. 11. Modules: Let's look at how we can use modules. So we've got some prebuilt stuff here. This is layout dot SCSS, and this just brings in some nice generic layout stuff that I've already built. And we can easily bring that in to here, just using the US statement. And then we'll say layout. So we don't need to include the file extension. Saas will figure that out, and that will import into here. So it should have automatically recompiled now. And if we look at our screen here, now we can see we have all of the code here. And if we refresh the page, and we've got some nice layout here as well. So this is great. And this really shows the importance of a map file because now everything from both of these files. So we've got our font declaration here and on our last of here, that's all coming into screenshot CSS now, which is a warm we're including. And so if we go and inspect this in our developer tools, and we look at where this is defined. If got a header, it's showing is actually in the layout file, even though we're only including the screen file here, we can still trace it back to where we need to find it. Because this is a pretty small example, but being able to modularize everything is really important. We get to huge projects like this one. There are literally dozens of CSS, CSS component here. And each component is, has its own file. And then it's all brought together in the screen where we just bring everything we need n. And there's just so much CSS. So it's really important disability to break down our big projects into more manageable files. Then we can then all get combined into one. 12. Partials: One of the issues that we've got right now is that we've got this layout file, but we don't actually use this. We only use the screen CSS file on here. And yet it's generating files for everything. And so we just don't really need that. And we don't want all these kind of partial CSS files. So we can label our files as a partial by starting them with an underscore. If we rename this to underscore layout, that will tell SAS that this is a partial, so it's only going to be included in over files. And we don't want it outputted directly. So let's go ahead and rename that. And then if we know it's instantly that disappears wickedly. The map file doesn't disappear, so you have to manually delete that. But the layout file has gone and we need to rename this to be underscore layout. And so now everything should still be working. Yep, ninth. And so now outputting to the CSS directory, we've only got screen because we don't need layout. And we've now told SAS that it's a partial. So don't buffer rendering it. Sometimes you might have multiple versions that you do want to render. C might have a screen file and print file, or maybe you've got a separate mobile style sheet, or maybe you've just got individual components that only gets included them certain pages and therefore you just name them as it is. But for something that's never gonna be used on its own, It's only ever going to be used as a module that you implement something else. Adding that underscore at the start will mean that SAS knows not to render out to your CSS directory. 13. Use vs import: When you bringing different files into a SaaS file, you have some options in how you get in there and the most common, or there's the Act import, which is seen throughout a lot of projects and quite widely used. And then there's the New SAS module system, which is uses the app use command. And we'll just look at what those might look like. So something like that look almost the same just with those different keywords. And you might be wondering, okay, what's the difference between those? And so in this lesson we're going to drill down and look at those differences. So important isn't a SAS thing, it's actually part of the CSS specification. And in theory, you can import different style sheets in the browser itself. Where was the US system, the module system in SAS, if sass specific and compiles everything and then produces your output. We import, you can, you will import of our repeatedly. And I will talk a bit more about that on the next slide is to Hannah actually works. Where is using the use SAS? Make sure it only includes once. So if you, if you format PHP gap ground with talking about the difference between require and require wardens. Where if you've got multiple files that you're bringing in and they're importing multiple files. You don't want the file to be imported later time will go into that more in the next slide. With import, private variables are imported. So you can make a variable private by adding an underscore star. And that doesn't make any difference in employee still gets boy in where is on the SAS module system? It won't get ball in. And there's no namespace thing on the edges, literally shelters the file n. Whereas there isn't name spacing system in the SaaS module system. And we're gonna talk more about that in this lesson as well. Let's talk about this idea of multiple file imports. So let's say you've got a, a colours file that defines your colors. And then you've got two different components. You've got layout to SCSS, unplugged SESS. These define the components for how the page is laid out and some blogs specific styles. And then in screen you're importing everything and showing off to the browser. Now, if you're using import, any CSS in colors file will be brought in twice because it'll be brought into layout, and it will go into blog. And then you bring in both of those into screen. So you end up with colors being duplicated. Whereas if you use SAS is module system, it's clever enough to say, hey, layer on blog up both using this colors file. So we're only gonna import close ones and they can both use it. And then let's look at namespaces as well. So we've import there is no such thing as namespace thing. Whereas with the SAS module system, everything gets namespace. So if you've got a colours file with maybe a primary color variable in there, what you would do is you would use the news used bringing in, but then you would have to give the namespace of the file to access that variable. So you'd say, Because the file disco colors, the SPSS, you'd say colors dot primary color, and then the variable you'd want to use. Whereas on import, it would bring in that primary color variable and you would say color equals primary color. Now name spacing is only there if you want to use it. So you can do over stuff like if you didn't want it, we call colors. You just wanted something shorter. Like say, you could say use RSA and then everything is CDART primary color. Or if you just want to do with namespace thing altogether and make it like the old system, then you can do import star, and that will bring all the variables in without a namespace. So again, you can just do color equals primary color. So in summary, we really want to be moving towards the SAS module system, that's the newer specification. And SaaS site are eventually going to deprecate the import system in favor of using this new module system, which gives us all of the power of the old system. But it also gives us extra stuff like name spacing that we can use if we want to. 14. Comments: If you want to add extra information here, you can use comments. So we can do that, or we could do a kind of multi-line thing. And we can just say this is a comment. Now be aware that by default your comment are still included in your encoded CSS. So if we go down here, Hey, we can see a comment is in here. Little bit later we'll look at how to compress our output. And that does depending on your version of SAS, will strip the comments, but not always. So make sure you're not putting any confidential information here in these comments. So if you are, make sure you're checking that the is actually removed from your compiled version. If you're using the compressed output that we'll look at later, it should be, but just be aware that you probably don't want to put anything too private. 15. Nesting: Let's look at how we can use nesting to make things easier for ourselves. So let's add a bit of styling here. Might say our side, which is a sidebar, we're gonna text line that right. And then we're going to the margin off the top that, and then we'll do something similar for Maine. So here we'll take them on and off the top line high on paragraph tags as well. Okay, now, hopefully that all worked. Yeah. So sidebars moved up, our tiles moved up. This is spaced out nicely. Now if we think how we would write this in regular CSS, we do signed. And then we've got our text align haha And I'm below it would have to do a separate aside H2. And similarly down here, we'd have to do like a main H2 and then a main pay. So by nesting everything inside each of E reduces the amount of times we need to repeat ourselves with these collectives. Now of course, it makes it very easy to do a lot of deep nesting. And there have been historically some concerns about nesting. Too many labs, so yeah, free FOR laze normally fine. But when you kind of got five or six things next to each other, that can have a performance impact in a browser. That's nothing to do with SAS, that's just a general CSS thing. The latest test I've seen suggest that browsers actually now are really good at coping with that and don't necessarily have a problem. But it's something that if you all getting down to that kind of 5-6 nested inside each of the levels. You might want to consider about how you can optimize that a little bit. But nesting is just super useful because it just makes it so much easier to lay out rather than having all this flat statement where we've constantly got aside side h two minus h two main pay. It just makes it so much easier to look at and organize. 16. Variables: Variables work just like they do in a programming language. So we can come up here and we can say something like primary color. And I'm gonna spell color in British English because I can. That's a nice thing about using SAS or something like that. So we've now set primary color to this x value, and then we can go ahead and use this variable wherever we want. So for example, maybe here we want to set the color of our H2. And we want to do the same thing on the Hate Free as well. And then if we come over here, find, let's turn this off. Okay, so hot to silence, zoom in a bit. We can see it has gone to a slight blue here. Let's just double check. Yes, we go should he used a stronger color? And then we can also, then if we want to change this rather than changing in all the places we just go up here. We change it to red. We wanted and go I'll Headings go red. And we can judge it back easily enough. And we just have to change it in one place to change it everywhere. 17. Inheritance: We've set both of our head is to have this color. And maybe we wanna do a texture on phone to uppercase as well. And we might want to apply that to both of them. So that the problem is now though, is we've got repeated code and we program is rarely like repeated code. Luckily, we can use inheritance to solve that for us. So we could go ahead and let's do it a pair. Let's create a header and will take both of these commands on, put them here. And then down here, we're then, we can then get rid of these. And we can use the extend passing header. So this is just like class inheritance in object-oriented programming. Paxos into there. And that, great. So we've still got them, still uppercase. It's DO coloring them. If we wanted to override one of these values locally, we totally could say we could extend that, but we can still set the color to red instead. And that works fine. Great. Let's get rid of that. And we could add some more stuff in here too as well. So, and we want to add a border. And we've added up all the declaration and bam appears straight and both of them, and we can override them as needed as well. So that's super-useful. 90, don't even have to use this special percent header. You could use any selector. So for example, if we wanted to extend from the body, then we could also just extend body. Nutshell, why we'd want to do that, because we've already got the Helvetica font. But you don't have to extend directly from one of these kind of special abstract classes. To use our aux speak, you can extend from any of a regular tag as well. It's just a lot of the time it's easier to greatly special bass note. We're going to extend these from. 18. Mixins: And using the extend option is not the only way that we can use reuse code in SAS, so we can also use mixins. And let's look at how to do that. So we'll create mixing command and we'll give it a name, we'll call a header. And then we can put the exact same things. Haha. And instead of using extend down, we'd use include students. Same thing here. Good. So if we refresh, again, nothing's changed because all we've done a switch to mix in welfare than the inheritance. Now, what's the point of doing this? Well, there is now point. At this point, it works chips as well to use inheritance and that makes more sense. But where mixins come into their own is that we can pass parameters into them. So we could say color. And then down here, we could say OK, red, and here we can say blue. And then hand when to use color as well. Now. Okay, yep, great. Now we can also give this a default properties. So by default maybe we want a header to be the same color as the border. And that means that we don't need to pass it anything. Hey, we can just include the header may be here. We want it to be the primary color. And then we guess that that's the same color as the border now and this isn't a doc cola. And so this is the power of mixins over the extend option is that we can pass a parameter n. Now of course we could use override that locally here. But also we could do things like we could use some out sauces, built-in function. So maybe we want the color, but we want it darker. We could say dark and 20%. And then whatever color would be passed in, it would we went through this dark and function and we'll cover the doll can function a bit later on. But the power of mixins is where you want to do things a bit more programmatically pass in parameters and do something with that parameter favor down here. Whereas the inheritance, you can do a similar thing with extend and overriding the parameters locally. But mixins give us more power to start with the normal inheritance and extend. And if you need them all power, then go to the mixin. 19. Exploring project 3: We've now looked at some of the core features of SAS. So let's move on to some of the more, they're not necessarily advanced features, but some that are maybe use less commonly. You'll probably use a lot of them. But I just wanted to break the course down into smaller projects. So let's go ahead and open up the project for me. Again a moment. It's unstyled because we haven't got any style sheets up. Yeah, and then we've got predict free code here. So we've got our HTML. It's just referencing a screen file that doesn't exist yet. And there's some prebuilt stuff in here. So we've got, we've got this nice baseline variable to give it the standard size. And we've got some layer information, and then we've got a series of colors that we can use here as well. And we'll use these throughout this project. 20. Operators: Sas allows us to do some maths. So let's go ahead and create a screen style sheet. And will impart colours. Will also NPO layout. And again, we use the star operator because we want to get up baseline variable. And we'll just save this screened CSS. Yeah. Okay, nice. And then let's update our command as well. So we'll go into Project Ferrari. And again, we just kinda and that SAS dash, just watch SAS to CSS. And then let's use a standard operators. So let's add a margin to the bottom of the header or a border even said to primary color member that we've imported all eye colors here. So you've got access to all of these variables and as we did with the Star, has no name spacing on them. So we can do to these primary color. And then let's use our baseline variable. Let's set the width to half the baseline. So we didn't baseline divide by two, which the baseline is set in here to 24 Px. So we should get 12 pixel bottom, solid border. And let's just try that out and see what happens. Okay, perfect. Yep. So we just inspect our header. Here. We've got list 12 px border, which is nice. And the great thing about using a baseline is if we wanted to make it way bigger, then everything would get bigger and just scale it down. And then we could do a similar thing to the header. So H2 margin top. And we could do, we could do it a double baseline margin. So let's just check that it's yet. There we go, fully pixels, so twice as big. Nice. Now you don't have to. We've got all the opera is. So we could also do something like margin top, baseline plus 50 Px. If we wanted, we have to divide, multiply. We can use any mathematical operator. But that Git's allows us to, especially if we're most useful when we using relative sizing, is that we can size everything like this to keep it on a nice, beautiful grid. Love good design technique is all about maintaining that grid and equal spacing between everything and using the operators has a really nice way to do that. 21. Built-in modules: Sass comes with some built-in modules and functions inside those modules that make it really easy to do stuff. So for example, on header, maybe we want to give it a color. But so we could do something like primary color. But maybe that's a bit light so we can use the dark and function to automatically make it darker. Yeah, perfect. And that's dark ended up as a tone of color function. So it's worth going through the SAS docs and seeing all the functions. They've got the dark and function particularly it's a pretty blunt instrument and they have a lot finer detail tools that we have checking out. Also some really nice stuff in the maths module. So we've got this diagram down here. Maybe we want to make that 200 wide and we want to get a nice percentage. So we're gonna do two divided by three pi sine to the percentage function. And how should get a two thirds diagram? Yep, perfect. Again, There's a bunch of different functions in the maths module, as well as a column module. And now overbuilt in modules as well that provide a lot of really nice pre-built helper functions that you can drag in to make your life easier. 22. Flow control: So we can also do some basic logic and flow control and SAS lets look at what that might look like. So we'll come in here and we'll create a mixin called header and will allow us to pass a leveling. And then we'll do some complicated font sizing. So we'll take half of the base line and we'll times a bar five minus level. So if we think here, if this is a level three, then this is going to resolve to two times off the baseline will make it a 100% of the base line. And if this was a level two, then this would resolve to free. And so it'd be a 150% of the baseline, probably every complicated it makes sense, but we'll talk through it anyway. So this is doing something like this is very good for dissociating. Fact, when Layer halos just move this over to screen. So we want to dissociate how a h1, h2, and h3 tag look from the actual tag itself. So similar to the way bootstrap do it, we want our page to be semantic. H1, H2, H3 in order, but we don't necessarily want them to display that way to sighted users. So we need to keep it that way to make the page accessible and understandable. But we might want to style them differently. So H2 tag might actually be smaller than I hate free tag. Let's go ahead and include that. So let's pull out N and I'm okay to hate free. Yeah, nice. Straight rows working. So this is supposed to be a 150% on Baseline and we can see it's 56 pixels. And this is supposed to be a 124%. So that's work in nice. Okay, so now we've got this nice head, a mixin. Let's add a bit of logic. So let's say if level equals lesson for a, so if it's an H1 or H2 were only applying this mixing to H2. So you won't actually affect the H one, but if it's less than three, and we're going to add a border bottom, same 1P. So we're gonna use primary level like color. And I'm gonna set to solid. So now both the H2 and H3, I can use this mix end, but this is only going to be applied if the level is less than three. So we should only get this border bottom on the H2 tag. Let's double-check things work in. Yep, perfect. So we've now got a border bottom on H2. But it's not been applied to the Hate Free because it didn't satisfy this if condition. 23. Error handling: So we put our logic in here. But one issue is that I could potentially pass any value into here so I could modify the hate woman. And I could say, OK, I want this to look like a level five Hadza. But if we think about level five or five minus five is 0, which is going to give the font size of 0, which is not going to be a good idea. So if we take a look at that, it disappears because it's now got font-size of 0. So really this was, this mix-in was never intended to have a level over free. But how would we know that? Well, we can add some error checking in. So again, let's use the if statement and not say if level is greater than three, then we're going to throw an error. And we're gonna say level must be one to three. So now if we pass a level with an invalid value for this era, war does not mean, well, it means it'll stop compiling gives us an area on the terminal. So here we've got the S, it's flagged up the problem that our head is five. If we change that to a valid value, like one, then it starts compiling again. And I had to come back as well. Yep, nice. And we don't actually want that, but that's how you would use the era, especially with these if statements. And there's also a warm as well. So if there's something that's not great, you want for a warning in the terminal, but it doesn't not to need to break compilation. You can use the warm tank rather than the error tag. 24. Debugging: What happens if our CSS isn't looking quite what we want it to look like. But we can use the debug tank here. And we can pass values n. So say we want to look at what this is outputting. We could just copy and paste this in. Now that is one change we need to make weak on sleeve that variable in like that. We need to put it in a hash and some curly braces. Otherwise, it will in fact put on. If we look at what the console is doing now, we can say we've got our color grade, they're here because we didn't wrap it in that hash in curly braces, it's just printed text. So you need to make sure we add that in. Let's just get rid of that. But we get, we can see what our values are. So we can use the debug tag. We could pass any text into here. So we could say here, say debug, that it's fallen into this era trap. But we can also print out any variables. And we could also do the same thing with say baseline. Yep, cool. And that just helps us to figure out what's going on. If we were a bit confused about what's happening in our style sheets. 25. Forwarding: At the moment, we're importing both layout and colors into our screen file, but layout already imports colors. So what if we, anytime we included layout, we want the color variables to be in there as well. And we didn't want to have to manually import it. Well, right now if we comment that out, it's going to break because the way that the module system works in fasteners, you don't automatically get employed variable. So here we can see primary colors gone missing. But that is an option if we always wanted to forward all of those colors along with layout, is we could use the forward tag. And that would say whenever someone calls this layer and also send all the colors. And if we save that, we've noticed it started compiling again. So that means that if over files when I bring in this layout, that will automatically get the Kohler's included as well. 26. Coding challenge: Now it's time to start coding challenge. So if we open up our predict for directory, we've got this index.html, which again is a nova. Standard page, were put into elements n and it's linking to the screen dot CSS. Who's also an juice, is a totally empty file. So if you open it up in the browser at the moment, it's opened up project four. You're gonna say it completely unstyled page. It's got search box that got went to products, some links at the bottom. And it's your job to use the SaaS knowledge that we've learned so far to style it up. Here's one I finished. And it, you can find this if you just open up that solution for index in your browser, you can say this doesn't have to look like this. You can make it look however you want. Or you could try and make it look a bit like this. It's up to you what you do. But I really want you to do here is give it a go. Use all those skills that we've learned. Go back to the early lessons if you need a reference and just get some real-world hands-on experience building your project. 27. Example solution: Hopefully you've now had chance to build up your project. So if you haven't done that yet, pulls this video, We don't watch the rest of it until you've had a go at it. But once you've done that, then in this lesson I'm going to go through and compare my solution where I built this. And you can look and see if it compares to what you've done. So will open up this solution for a file and we're going to the SAS. Similar. My screen is just a series of imports and I've used import revenues because it doesn't matter at this point, edges need all the code then. And I've created this variable files that holds my colors and also the baseline I want to use. Then I'll move my core stylings over here. So this is things like body and how I want to lay out generic tanks. So it's kinda like a reset by down. Use reset. In this case, I'm just adding some additional styles over the top. Then I've got a form module. So to define this, my search form here, It's I'm styling, getting into the margin and just styling the button and the input. And because these mostly have the same styles and the same board on color and fell hair. I'm used some inheritance. And then I've just added the extra bits that I need to him, to him as well. Then my layout file that defines my elements like the header and footer. So using lots of nesting here. And here, he said I've got a media query because it actually shrinks down pretty nicely. So it's responsive, but it also slightly different if you go all the way down to o by o. So that's a really nice feature of the nesting is you can nest the media queries inside the element itself. Used all the variables here, of course, I'm importing here. And then I've got products which gets displayed in a grid using that really nice repeat autofill min-max, which if you haven't seen, is really good checkup my CSS grid costs. And again, we can use things like do in products, direct child, but we can nest it. And in the same way here, doing direct child of the product, gal, this styling. So that's how I've laid out my project. Feel free to go through the solution fall folder yourself and see how you all can pass. 28. Deployment: We've now taken look at many of the features are socks and get our hands dirty with the project, getting some real-world codecs variance. In this module, we're going to look at how we roll sat out to the real world. So the things that we might want to turn on when loaning out to production to get it ready to deploy onto a live website. 29. Compression: So far our CSS is compiling great. But we could optimize this forever because we probably don't need all of this whitespace, for example. And we could just reduce it all down and optimize, just made that file size smaller. So let's go ahead and do this. We can do this on any directory I'm going to go into solution for. But you can use any directory you want and we don't need to watch. So let us just put an ice dam that command. But then let's add dash, dash style equals compressed. And now we can say that it's all reduced down to one single line. Let's turn wrapping on. So we got rid of all our whitespace, it's along a single line. We still get a map data, we still get everything we need. But it's just a lot smaller noun. If we want it to send that down to the browser, it's going to take up less space. And given that this all happens automatically, like our original sax is still fine, it's just in the output. It makes sense to do this every time, especially if we've gotten the map data on there when we're shipping out to production. 30. Source maps: We can also control how the source maps are generated for our output. So we'll come back to here and we'll get rid of this. Style is compressed and we'll say no source map. Now at this probably won't work because we've already got the sitemap file seeds. It's gone back here. So let's go ahead and delete this file again. And this time we can see the Saltzman hasn't comeback. So we've successfully disabled I for some reason you don't want the source map and the like struggling to find out where your code is. That's how you do that. The other alternative is to use an embed it source map. So we can change this to dash, dash embed source map. And again, if we go back to our compiled code, again, we haven't got a separate file here, but now we've got all of the data included inside of our map, so we don't have to bother with separate files and everything's included here. Is this batter note? Probably worse because with the separate files, the only time that you would need to download those was if you open your developer tools and then the browser will fetch them. Whereas this way, you're gonna end up with all the source map data that's going to go down to regular users rather than juice developers who are trying to debug something. So it is slightly cleaner in there's only one file, but you end up with a much bigger CSS payload. So it's better to use separate files when you can, if you want to embed them, you can. So those are two options you can use to control how source maps are generated on your compiled CFS. 31. Final thoughts: Congratulations on completing this class on SAT, the CSS preprocessor. Complete your project on building your own SAS project has detailed in the earlier lesson and share that with the group. If you've enjoyed the class, then please leave a review and I look forward to seeing you soon.