Step By Step Sass

1. Introduction: Hi, I'm Lisa Catalano and this is step by step SAS. I created this course for people who know CSS but have not tried to CSS pre processor yet. I know how overwhelming working on the Web can be. Almost every day you hear about some new skill that you should learn to stay up to date. Every time you feel like you're getting good at one thing, you turn around and the best way to do something is completely different. I'll be honest and let you know that I really didn't want to learn SAS. I was very busy in my job, creating a brand new website using back end and front and technologies that were somewhat new to me. I had much of the CSS already figured out when I was told that I had to use SAS. I love learning new things, but I didn't think I had enough time to learn SAS without being slowed down. I'm happy to say now that I was completely wrong. Learning sass was really easy, and I actually grew to love it within that first day. I can't say that about very many of the Web technologies I've tried toe learn. Over the past five years, SAS was truly easy to pick up, and the payoff was large. So I've decided to make this class to encourage those of you who feel like you don't have enough time for another technology or skill right now to spend just a little bit of time with me toe learn this valuable skill. So what is SAS SAS stands force and tactically awesome style sheets, according to their website, Sass is a metal language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat, CSS allows SAS both provides a simpler, more elegance in text for CSS and implements various features that are useful for creating manageable style sheets. In other words, it's a pre processor for CSS. You write your CSS in the SAS format, and what you write is compiled or generated into the standard CSS format. It allows you to write your code in a more organized and simpler way. It translates what you right into the standard CSS. They're two formats of sass, and each has its own file extension. The dot S A S S files are the older original file type. It allows you to write your CSS without any curly brackets or semi Coghlan's. The selectors and properties are distinguished by indentation. The DAT s CSS file format is more similar to regular CSS, but it adds in all the SAS helpers like indentation, variables and more. Any regular CSS file is a valid dot CSS file. We'll be using the dot s CSS file format in this class. It's easiest to get used to, and it makes it very easy to convert an existing website over to using sass. Some of the nice things you can do with sass are to use variables to save values that are used in many places. You can create mix ins or extension so you don't have to write the same cold over and over again. You can nest. Your selectors help organize your code, and you can create more efficiency. Assess. For production websites, there are other CSS pre processors that you can use. Besides SAS, less is the most common alternative, and stylist is another option that has a smaller following. It's not hard to switch over to a different pre processor once you know one so anything you learn in this class should translate easily to another. SAS is probably the most popular, but less is on some large projects, like Twitter Bootstrap. So you may find yourself using both in the future or whatever the next great new things someone comes up with. The point is that once you understand how a pre processor works, you have that skill, regardless of the specific language chosen. SAS is written in the ruby language, so you will need ruby installed on your computer. However, you don't need to worry about having Ruby installed on your Web server. You only need it where you will be writing your CSS. We'll talk about the installation of Ruby in SAS in the next video. I've tried to structure this class in small steps so that you either learn it all in one sitting or take it one step at a time and just focus on one new concept. Today, the choice is yours. Either way, you should be able to get through this class pretty quickly, so let's get started 2. Installing Sass: installing SAS is simple, but it does involve using the command line on your computer. I know that this is where some of you may want to get off the bus because the command line scares you. But I'd encourage you not to worry about it and just follow the steps that I present. There's a lot of power to be gained and understanding how to use the command line, and you really won't have to spend a lot of time there to use ass. But it helps if you understand what it is and how it works now. There are a lot of tools out there that would allow you to avoid the command line, especially if you're on a Mac. But I am going to focus on using it because I think it's valuable to get over any fear or dread you might have of using it. This is going to be the most complicated step in the entire class. Once we get past this step, the rest of it is going to be easy and we only have to do this one time. So the first step is to install Ruby, and I want to make clear to you that you do not need to have Ruby on your Web server. You just need to have it installed on the computers where you are going to be doing development. So if you have a desktop and a laptop where you do work, you will need to do these steps on both computers, but it does not need to be on your Web server. That was one thing I was concerned about when I first started using sass, and it turns out it wasn't anything that I needed to worry about. The Ruby programs will convert your sass files into CSS files, and that is what is gonna go on your Web server. So if you're on a Mac, you don't need to do anything. You already have. Room be installed with your operating system. If you're on Windows, you need to go to ruby installer dot org's slash downloads and download the most recent version of the installer and follow the steps. I will demonstrate that process in a moment, and then if you have Lennox, you just need to install the ruby package. So I'm at the website and I'm going to choose thief first download link because that is the most recent version. There's other things that you can install there, but it's just the main installer, the one at the top that you want. After it's downloaded, you can click on the download file to go ahead and install it, and the only thing you you can accept the default you need to accept the license. But the only thing you really need to pay attention to here is you do want to check that ad Ruby executed ALS to your path. Now I'm turning it off for myself cause I don't need it, But you probably will want to have it turned on. What that does is let the command line always know where your ruby is. If you have any trouble, though, please post a question in the question and answer section, and I will try to help you. The next step is to open the command line, so if you're on a Mac, you need to find the terminal program. And if you're not sure where that is, you can type it into the spotlight, and it should find it for you. You might want to dock it so that you have access to it always. If you're on Windows, you're going to find the command program or C M. D. And if you're on limits, you're probably already at the fan line and you don't need help with us. I'll demonstrate on a Windows machine how to get there. I'm going to the start button, and I'm just gonna type CMD. I confined it that way. Or I can also go to all programs and find the folder where Ruby was installed and I can use the start command prompt with Ruby. The next step is to install Sass, and we install SAS using the Ruby gems. Ruby Gems is a package manager for ruby extensions, and Sass is a ruby extension. It was written in Ruby. This is a way that you can install programs and extensions using the Klan line instead of having to go to the website, download the files, extract them and install them. So it's much quicker if you get used to installing things this way. So it's a nice little feature of Ruby, and the command is very simple, and it's the same on all operating systems. It's just gem install sacks, so it might take a minute or so to install, but it's usually pretty quick, and now it's installed. The final step is not really a step that needs to be done. It's completely optional. But one thing I like to do after install something is just checked the version and make sure that everything installed. Okay, so you just type Ruby Dash V for checking the ruby version and SAS dash fee for checking the SAS version. You can also type dash age to get a listing of all the SAS commands. So SAS is installed now and we're ready to go. I would probably leave the command line open because you are going to need it to compile your sass files. But in the next movie will look at the project that we're gonna work on in this class. 3. Project Overview: We're going to work on a real project in this class, not a real website, but something a little bit more substantial than just a bunch of demos. We'll be using a project I designed a few years ago for a design class. It's not a live website, but it has a few pages, and it's enough for us to actually convert to sass and see the benefits of using it to write our CSS. I have a link to the starting code for the project listed in the lesson notes. You can also get the code for my get hub repository. After each step, I am committing the changes and tagging them so you can always find the code for any step here. By changing the tag, I will not provide a download link at every step. The intention is that you should try making the changes yourself and play with a code to see how it works. That will mean you need to pause the videos or try doing the work. After you watch the video, I'll be moving fairly quickly and won't completely convert everything in the code to sass. I'll do enough to explain the concepts and move on after each video, you might want to try to find more examples to implement the concept. From that lesson, I'll be using brackets as my editor. It's a free open source editor from Adobe. I chose it because it has a nice life preview of your code when you're in the chrome browser. That way, I don't need to refresh after making code changes. You get that live preview by clicking on this little icon when you have your HTML file open . So this is the website. It has a home page, and there are some transitions in the navigation and hover state. If you click on the first video, you can get to an example Instructor page. This has some tabs with different views there. There's also a category page right here. If you click on the workout types link and if you click on the logo, you can go back to the home page. It's three pages, and it should be enough for us to work with. There are some things in the code that are a bit dated because I did this more than two years ago, and there are probably better techniques that we could use. Now there are also some bugs and mistakes in here as well. This was for a design class, and I was focusing on how it looked and not the code. But this will be a good place to start using some sass your first attempt at using sass on your own, maybe to incorporate it into a site that you've already written some CSS for. So I thought this approach for learning sass would be the best way. You don't need to use ah, 100% fast For your code. You can write normal CSS and Sprinkle in some sass techniques while you're still learning the concepts. As you become more comfortable with the techniques I'm teaching here, you can start writing your code and sass from the beginning, and that's when it becomes very powerful and quick. If we take a look at the code, we're not going to focus on all of it. The main file we will focus on is this style CSS file, which is where the main CSS is. If we look at the HTML, we can see that we're linking toe a few CSS files. There is this I e Onley file, which you may not even need anymore, depending on what versions of IE you're supporting. There's also a handheld CSS file, which is used to display the site in smaller few ports. This is not a true responsive site, but it does have a slightly different look for smaller view poured. So if someone's viewing this on their phone, they will still be able to see everything. But it's just slightly changed. We're not gonna really change anything in the handheld CSS file, but anything we talk about in style CSS could be used in handheld CSS as well. If we want to see the live preview work, we can just change some text in the HTML. I'll change new releases to latest, and it will change right away in the view port. And then if I undo it, it will change again. It changes as soon as I save. So this is the project will be working on. If you haven't already downloaded the initial files, you should do so now. If you want to try to work along with me. If you don't want to do that, you could also try opening up one of your own websites and try to follow along. Making changes in your own code in the next lesson will convert this site to use SAS. 4. Converting Existing Projects to Sass: in this lesson, we're going to learn how to compile sass files. We will change the style dot CSS file that the Web page uses into a SAS file or a dot s CSS file. The only thing we need to do this is renamed the File. I'm going to call the dot s CSS files sass files from now on, because it's much easier to say. And it will be less confusing when we're comparing it to regular CSS files. When working with sass, you do your work in the SAS file, which then gets compiled into a CSS file for your Web pages. Compiling SAS involves a simple command typed in on the command line. You change into the directory of your project, the directory where your CSS is and you type SAS, which means you're going to run a SAS command to dashes, which invokes a SAS option. Watch with no space before it. This is to say that you want to watch a file or a folder the file name, which is the file that you want to watch Colon to indicate that you're done listing the files to watch and then the file name where you want the output to go? This command will take your sass files whether they have the dot s CSS file extension or the dot s A S s file extension and put them through the compiler or pre processor and it will spit out the CSS file. So let's try it. I have my editor open. You can see that I'm linked to the style that CSS I'm also linked to handheld, which we're not going to change right now. I'm starting up the Web page by clicking on the live preview button. So here's the page and everything looks like it should Now I'm gonna rename Thesis E ss file into dot s CSS. The life preview isn't handling this, so I do have to refresh the page. When we look at the Web page, it's now just showing plain html rendered. There is no CSS anymore because we renamed the file so we can fix that by doing the watch. Commander. I'm bringing up the man line and I'm going into the CSS directory. If I type d i r or l s. If I'm on a Mac our limits machine, I'll see all the files in my directory and you can see that sass file right here. So now we can compile it in irregular CSS. I'm typing SAS two dashes Watch, then style. That s CSS colon style dot CSS. Now you can see the command running it created are styled up CSS file and it says overwrite Every time it writes to the CSS file, it's going to say that Notice that we're not getting the command prompt anymore. SAS is just sitting there. It's waiting or watching for changes to our SAS files. Whenever it sees a change, it will recreate the regular CSS. There is another problem in brackets. It's still a new project, so it's not perfect yet, but it doesn't recognize when I have new files added to the directory. So it's not finding the dot CSS file, so I need to close it and reopen it. Now I can see it and I have to restart the life preview and now we can see the website is back to normal because there's a CSS file. Nothing's changed. We haven't you know, made any changes to the website yet, but if we look at the SAS file and the CSS file. They look almost exactly the same. There are going to be some formatting and spacing differences, but other than that, they're the same and they should be the same because we really haven't used any cess and text yet. Now, if we want to see how this works, we can change something in the SAS file. I'm going to the body selector and changing the background color to red. Now, before I save the file, I want you to look over at the command line and when I save it, notice what happens. The SAS file changed, so it rewrote the CSS file. You can see it says overriding. It looks like the live preview isn't detecting the change. So I'm just going to click on the browser window. And now it seems the change and change is the style. And then I can set it back to normal and we can see the change detected and the background color has changed back. So that's how you use SAS. Whenever you're going to be modifying your CSS, you just have to remember to start up the watch command. You leave it running in the background while you're working. You don't really need to pay attention to it unless there is a problem. So to summarize, you start up the SAS watch command, you make your changes in the SAS files, and then sass will create your CSS for you. 5. Variables: The first feature of fast that I want to talk about is variables, and that's because variables are what sold me on SAS. If it was the only feature of cess, I probably would still want to use it. CSS is eventually going to have variables, but it doesn't yet. And, of course, even once they start to be implemented, it's going to take some time for all the browsers to be on board. So let's see how SAS variables work and how you can speed up your development with, um, you define a variable with a dollar sign you could name your variable. Any words using a combination of letters underscores and dashes. After you name your variable, you give it a value. The value of your variable can be a hex value for a color, a string of text numbers or sometimes tour falls. It depends on where you're going to use the variable. To use the variable, you must define it first, and then you just used the variable name wherever you would have typed the value of the variable. If we look at the CSS that I defined in the project, you will see that I put a comment at the top of the file for the main colors used in the project. You can see how they correspond to the colors on the Web page. Even put the comments at the bottom so that I always have easy access to the color values when I'm working on a project using sass mix that unnecessary because we can easily change the color in one place if we need to. So let's make our colors in the variables. Now I'll move this comment down to where I want the variables defined in the code. Next time did the variables meaningful names? It's best not to name the variables a color like blue, because if the design changes, the names won't make sense anymore. I'm using base and accent now I'm going to do a search and replace so I confined everywhere . I use those colors and replace them with the variable reference. I just need to be careful not to replace the variable definition color, and I did actually do that on the last one, so I can just undo that. Now I'm making sure that I'm watching the CSS files from the command line and then I can go back to the editor and save my changes, and it looks like there's an error. The message is telling me the problem is online 29. So I'm gonna go look there. It appears that I have a reference to my variable before it was defined. So I need to move my variable definitions higher in the file. Usually put them at the top after the reset CSS to avoid this. But I just didn't get it in the right spot. So this time it worked. And if we look at the CSS, you can see that where we define the variables, there's no code there. We can just see the comment because that isn't valid. CSS. Instead, when it got compiled, it looked for the variable name anywhere in the code and replaced it with the actual value of the variable. Now, if we look at the website, the colors still look good. We could also make a variable for the fund. I don't have a lot of fun declarations in the CSS because I changed the Bodies Fund and it cascaded throughout the entire page. But we can try to do it here anyways because There are times where you're using multiple funds in a website. I'll make a variable called base font and use it on body. So actually, all of this isn't very exciting. Converting CSS to use variables still take some work, but the great thing about it is when you decide that you want to change one of the values. Let's say I wanted my accent color to be a slightly different green. I can change the variables value, and now it's a brighter color and I only have to change it there just in that one place. That's the power of sass and what makes it enjoyable to use. It's easy and painless to modify your code. So the CSS was regenerated. And when I look at the website, the colors have changed. Unfortunately, the green is in my icons, the images, so the colors air off of it, so those would need to be changed as well. If I really wanted to make this change, if I were doing this website today, I would probably make the images white with transparent backgrounds and then color the background CSS to make it more flexible. So I'll change that back and try changing the base color to black, and I can quickly see the difference on the background and buttons. One of the great things about this is that you can do some design work in the browser, where you actually get to see how things look. You don't need to be in Photoshopped to play with your design, so to summarize, to declare a variable, just remember to define it at the top. Start with a dollar sign before you give it a name. Put the value at the end, and then anywhere you want to use that value, you can just type in the variable name. And if you ever want to change it, you just need to change the variables value. In the next lesson, we'll talk about how SAS handles comments a little bit differently than regular CSS. 6. Comments: in this video. I want to talk about comments with sass. It seems like a minor thing, but I really appreciate the small differences between regular CSS comments and SAS comments . In CSS, you put your comments inside of a slash plus Asterix. You also have to close out your comment with an Asterix plus slash. This is a very common syntax for comments in many programming languages. Commons conspire man multiple lines this way, and that could be useful when you have a large block of text that you want in your comments . The problem is that this combination of keys can be a pain to type. You always have to close out your comment. You can't just start the commenting. SAS allows you to use single line comments instead, which I find easier Toe ad for a single line comment. You just type two slashes and anything following those slashes on that line will become a comment again. This is a comments in tax in many languages. However, regular CSS does not allow for single line comments, so having them in sass is a nice feature. You can use both types of comments in your SAS files. The single line comments will not be added to your CSS. The multiple line comments will get added. Personally, I try to just use the two slashes format because I don't need comments in my CSS. I need them in the SAS files, which is where I edit my code. So I have my SAS file open and I am watching for changes to the SAS file. If we look at the existing code, you can see all the comments are showing as gray. That's because the theme of the text editor sets comments to Gray. These are all multi line type because that was necessary when the smile was a regular CSS file. I'm going to change these comments to be the single line type with two slashes. I'll leave this comment as a regular CSS comments so we can see the difference when we saved the file. When we look at the CSS, you can see that there are very few comments there. There's the one that I wanted to save and there's a few that I miss. Comments are very helpful for keeping your CSS clean and organized for later when you want to make changes to the design. You don't need them in your final CSS, though, so using SAS style comments will let you comment your code as much as you want to without adding anything to the actual CSS. 7. Nesting: nesting is a feature of fast that allows you to nest your selectors inside of other selectors instead of having to type all of the tags in your selector such as H one and A for an anchor tag inside of an H one. You can us the anchor tag inside of your H one brackets. This means you don't have to keep retyping h one tag over and over again. When the SAS compiles it creates the full length selector, adding the top selector to whatever you nested inside. It really helps keep your CSS organized, which is the main reason I like Nestea. You can also know sub properties of things like font, background or border. You can see here were nesting family size and weight inside the fund brackets. I don't actually use this in text because I generally prefer the short Hansen text, but some people do find it useful, so let's use some nest een in the project. We can see that the first non reset or based selector in here is body. Now, this is where we could create some trouble. Everything on the page is going to be a child of body, so Technically, you could nest all of your selectors inside the body's selector, but we don't want to do that. There's no reason to add body to your other selectors. And if there isn't a reason to have that additional tag in your selector, you shouldn't messed it, so we'll leave that section alone. We have a similar situation with container, which is the 960 pixel wide container of the page content. So this brings up an important point. One of the complaints about SAS is that it can encourage bad CSS. I'm not sure this is true, but one reason it could do that is because of nasty. Using nesting makes it tempting to mess everything because it looks nice and organized. But you really should only nest your selectors if you need the specificity I have found when working on larger websites that if I only add additional tags classes or I ds to my selectors when I really need them, the CSS is easier to maintain and work with. A common goal that people cite is to keep your nesting to two or three levels. Of course, this is just a guideline, and I might be breaking that here on a smaller site. This is not as important, but when you start working on large scale websites with lots of CSS, this does become more important. So I'm going to focus on the header area first. It's possible I don't even need to include Header and all of my selectors here. But I'm not going to re factor the code right now other than trying to convert it to sass. So I'll start with this h one and move it up and indented to make it clear that I'm nesting . Then I'll remove the word header from the selector. If I left it in, the CSS would not be correct because it would compile two header header H one instead of just header h one. I can repeat this process with all the other selectors that start with header. I'll take this large group and cut and paste it above, indented and replace the word header with nothing. Now it looks like this selector. The P was not grouped with the other ones, so I will move it a swell and there's actually two different header piece electors in my code. This is a nice benefit of doing this change because it helps you clean up your code and organize it So these kind of problems become more evident. I only need one header p selector, so I'm going to fix it right now. I'm also gonna move it higher cause I usually like to keep my less specific selectors at the top. Now I can do some more in denting on account. It's likely I don't really need to nest the class account inside of header on the small site. But if it became a real site, I might need that specificity. So I am gonna leave it in now. I want to go make sure I'm watching for changes to see if I made any mistakes. I'll save the file and it looks like everything compiled. Fine. I'll take a quick look at the header and it shows that things air still working. Okay, I'm not going to make you watch me do the rest of the CSS Instead, If you want to make sure that you really get this concept, I recommend that you pause the video and try to do it on your own. There's still several areas to work on like the NAB area, the sidebar listing area player. And even more than that, I'll show you real quick. What I changed here. I did not the knave area. I nested it further on the UL and ally selectors. The only thing I did not nest was this, which has a comma separating a footer selector. So there's two separate selectors on this line, so I didn't want to mess that because it would mess up the footer selector. I did do the footer down at the bottom, the type section, which is for this overlay menu. Here I nested the player knave code, which is part of the second page, and there were more spots that I nested. If you want to see the full state of my code, I'll share a link to the code on Get Hub so you can compare your changes to mine. The final point I want to make is that when you're first learning sass, it's a good idea toe. Look at your output CSS. After you save your sass files, looking at what the pre processor is doing with your sass will help you learn it faster. If we look at the Hatter area. You can see that the CSS output looks like the original code. We see Header H one again. If we look at the knave area, we can see now you al L. I A. And the full group of selectors on that line. The only real difference is the inventing in the new file. Nesting is a useful feature of SAS because you can type less, especially when you're creating your CSS from scratch. It helps you keep your code organized and easier to read and maintain. It should be used with caution, though. Remember toe on Li ness when you need to. Less specific selectors are generally easier to maintain when you're writing your CSS. 8. Extend: in this video, I'm going to talk about the extend command and SAS Extend is a way for a selector to inherit all the properties of another selector. It prevents the need to duplicate code. It could be used to define sets of properties that a group of elements could share. It extends to a comma separated list of selectors. In this example, we have some styling for a button. It is the base styles for a button that most buttons on the site will use. You can then have other buttons that will have these styles, but you can customize them with unique properties as well. This prevents you from needing to copy all the duplicate properties for these special button you can see when the SAS is compiled. It just adds the special class to the button selector, and it only leaves the unique properties on the specials. Last selector below. Writing your code with the EXTEND command allows you to keep your code shorter and more organized before we go into our project. Let's try playing with an example using this button concept. I have these two starter files that you can download in the previous step test. HTML is a simple Web page with a button on it and a div with a class of C T A. For call to action. There is also a test SAS file, with some variables for the color and font and the base button styles. You can see that the HTML file is linking to test CSS, which doesn't exist yet, so that's why our page doesn't have any styles. We can create the CSS by watching the test God s CSS file. It's the same command we've already used, but this time we replace the word style with test. There has been an update to bracket since I started filming this class, so I can now hit F five and refresh the folder so I can see test CSS without closing and reopening the editor. When I click on my preview, you can see the styles on the button. So far, there's nothing new here. Now if I want the call to action Div toe look like my buttons, even though it isn't actually a button, I can use theatrics tend command. So in the SAS file, I'll use the class selector c t a and type. Add extend button. This means all the styles from the button will be applied to anything with the C t a class . When I save it and then click on the browser to make sure it recognizes the change you can see the diff now looks like the button, with the exception of the fact that the width is 100% of the view port instead of a normal button size. That's because we're dealing with a dip instead of button. It's always good to look at the CSS generated, and we can see that the C T A class was added to the list of selectors on the button so I can add a with to the c t A class and make the Tech center aligned. I'll save it and we can see the changes in the browser. So let's look at the CSS. The unique properties to see TA Class are now in their own black of code. The properties that are shared because of extend are still grouped together, so now we can look at our project and find places to use that at extend. I'll close up the test files and open the project files Instead, I also need to stop watching test and start watching style again. The code that I am repeating often without any changes is the transition property. Because this is a CSS three property, there are multiple lines repeated because of all the vendor prefixes that we need. My first use of transition is on the navigation, where the background color changes when you hover over the buttons. I'm only transitioning the background color here. I'm using a duration of 0.3 seconds and easing type of ease in. If you're not familiar with transitions, a transition is a smooth change from one state to another, so we can transition between colors, sizes and more. Usually these air done when the style changes on the hover. You don't put the transition code on the hover styles, however you put them in the base styles. This allows the transition to occur when you hover over something, and also when you stop hovering. If we look for other places with transition, we can see there's a transition on the new arrivals with a little pop up with the type of work out and name. This transition uses all because it's transitioning other properties and not the background color. If you say all any properties that are different on hover, will transition in this case were really transitioning the position and opacity of the box to bring it into view. In general, it's best to target the properties you're actually transitioning instead of using all for performance reasons. But the reality on the small site is it's not really going to hurt, so I am going to use all in my transition set up everywhere. The other transitions are on the hover on the pop up menu and on the workout type page, the background expands and becomes larger. So I'm going to set up a base transition property using the class transition. I don't really have anything on the page with a class of transition, but I'm calling it this because it makes sense. I'll copy the four lines of code here, using the all for properties to transition. Now, Everywhere I had the transition code, I will simply replace those lines with at extend DOC transition. Now I'll save it and let's look at the CSS. You can see that after my transition class, I have the four selectors where extended transition. They're all grouped together here using the same transition code. If I looked for the transition property throughout my CSS, I will not find it anywhere other than here. This code is fine, but the strange thing is is that the transition class isn't really needed. There are no tags in my code that have this as a class, and it seems weird to have it in my final CSS. It doesn't hurt anything, but it isn't necessary. The reason I haven't, though, is because we need a base selector to set our transition properties on. In early versions of sass, you had to just accept this weirdness. But later versions of Sass added what is called a placeholder. A placeholder lets you set up a base class and doesn't force you to put it into your CSS. It's kind of like a super variable. You define a placeholder with the percentage symbol and then the name. Then you define all the properties you want, the placeholder tohave. So in our example, the only thing we need to change is the reference to the class transition with a period to a reference to the transition placeholder with a percentage simple. We do have to change this everywhere we extend transition as well. Now, if we look at the CSS, you can see that we no longer have that unneeded class of transition. The only thing using the transition are the four selectors that need it. It's a small change, but it makes your CSS more accurate and you don't create unneeded selectors with the placeholder. So to summarize at extend is a great way to avoid a lot of code duplication. It is especially useful for CSS three selectors that require a lot of vendor prefixes or any type of styling that you are repeating throughout your site. If the code you are duplicating does not belong to a specific selector and you want to create a generic set of code that you can extend, the placeholder can be used in these cases. 9. Mixins: a Mixon is another way to organize code that is duplicated over and over in your CSS. It is similar to add extend, but with mix ins, you can specify different property values by passing and arguments. It is different than extend in that the entire block of code from your mixing will be copied to the selector. This can make your code longer. Use it when the values of properties air different throughout your site. If they remain the same used at extend instead, let's start right away with an example. I'm in texts underscore mixing dot html, which has three dips in it. What I want to do with this page is style each div as a colored box. Each box will have a different size ultimately, but we'll start with having them all the same size. Each of these dibs has a unique class name and some text. The file links to test that CSS, which does actually exist in my folder. But none of the existing CSS will style this current HTM Oh, so we don't see any styles on the page yet, so if we look the SAS file, it's the same file that we ended up with after the last example. I do want to set a base font on the body of the file so all text will use the bass fund instead of this times. Roman. I'll use the Variable Dollar Sign based fund, which is already to find I will watch the test's ass file So now we can see that the font has changed. Now, instead of starting with a mix in, I'm going to review how we would do this with that extent. I want to create some boxes for each DIV. I will use the placeholder, syntax and say percentage sign box and then give it properties A with high margin and padding. Then I'll give it a background color using the accent variable. Now I can extend the box for each one of the dips. I'm making them all unique because my assumption is that each box will have some unique properties. If they didn't, I would just assign them all the same class name. I'll save it and then you can see the boxes take shape. Now, if we look at the CSS, you can see each class in a list with all the box properties Abdic stunned, creates nice, concise code. Now let's try it with the Nixon instead. So the syntax for that is act mixing. And then you give the mix in the name so I will say at mixing box for each box. I have to change it to say at include box when I say that nothing has changed, as we would expect. If we look at the CSS, however, it looks different. Each class has all the properties from the box added to it. There's a lot of duplication. The reason I'm showing you this is because this is a mistake. I made a lot when I first started using sass. I learned about Nixon's first, and so I used them everywhere. I had duplicated code. But using a mixing doesn't keep your final CSS smaller. Using at extend works better in many cases, but at Mixon is very useful for those times when you want the ability to change the values of your properties. So in this example, I want to mix in that will allow for different box sizes, so I'll add parameters or arguments as they're officially called and SAS for the width and the height you do that by adding parentheses after the name and putting the arguments inside, I will add width and height with a dollar sign before the word to indicate that these are arguments. Each argument you add is separated by a comma. Now I need to use thes arguments in my Mixon so the width will be whatever is passed in from where the mixing is called. Normally, I like to give a default value to my arguments. That way, if the code calling the Mixon doesn't pass a value, the Mixon will still work. To do that, you type of colon after the argument name, and then you give the default value. In this case, I'm going to use ah, 100 pixels. So again I save and look at the page, and nothing has changed since. The width and height are still 100 pixels Now. This time I'll change box one to have a width of 50 pixels and a height of 200. When I say that you can see the change. Now, I can change box, too, and just pass in one parameter that will be assigned to the first argument. The wit. So arguments are optional when I give defaults, we can create arguments for anything in the mix in that has a value we could do the margin padding or background color. If you want a practice some more, you might want to try making some more arguments here so you can create mix, since without arguments and sass. But if you find yourself doing this, stop and consider if add. Extend is what you really wanted to use. If you don't need to change the values, then try at extend instead. If you do need to change the values, then you wanna mix it. Let's look at our project now and see if we can create a mixing for the rounded corners in this site. I have lots of rounded corners, but the border radius has a different value on many of them. That makes us a perfect candidate for a Mixon. I should mention that when this design was created, it was more important to use all the vendor prefixes for border radius. But that's no longer the case. All the major browsers today are using border radius. The only thing you might want to worry about is early IE browsers like i e eight. I'm using CSS three pie, which is this pie dot HTC file. When I have this pie file to make Border Radius working, i e. I just need to add this behavior statement. So today we really only need two lines of code for rounded corners. But I'm going to leave this example, as is for now. If I use a mix in to define my rounded corners and the cold changes over time like it has with the border radius, it's very easy to modify it in just one place. I'm going to copy these five lines of code and create a mix in with them. I'm going to the top where I create my placeholder for transition and variables because I like to keep them together to create the mixing. I type at mixing and then the name, which I will call rounded, then parentheses for the arguments and I'll paste in the five lines. I'm only gonna add one argument because I'm keeping all the radius values the same. I will default it to seven pixels because that's the value I used in several places already . It could be anything, though. Now, everywhere I use that value. I have to change the seven pixels to dollar side radius everywhere. I'm using border radius with only one value. I will include this Mixon to replace the five lines of code on this 1st 1 I don't need to pass a value in because I wanted to be seven pixels, which is the default, and this next one as well. Now for this one, I do need to pass in the radius, which is 10 pixels I can't use rounded here because this is a tab and you can't use the shorthand version of border Radius. Instead, I could create a tab mix and later if I wanted to, and then I'll go through and change the rest. Now I will save it, and I need to make sure that I'm watching the style file and then I should scan the site and make sure that all the corners are still rounded. I think everything looks good. Let's look at the CSS generated. If I search for border radius, I won't find the mix and definition, but I will see it in all the places where he needed around a corner. Now here's the nice part. If I want to improve my CSS because I don't need those thunder prefixes. Aiken simply change the mix in, and the code will get changed everywhere the mixing is included. After I save and look at the CSS again, you can see there are only two lines of code being used here, and that was changed everywhere I used the Mixon. It wasn't changed on the tabs because I didn't use the mix in there, but everywhere else it has changed. If you wanted to create a mixing for the tabs, you have a couple options. One thing you could do is change the rounded mix in tow, have four arguments, one for each of the corners, and then you could specify the radius of each corner. I don't really love this method, though, because then you have to specify all four corners every time you call the Mixon. If you're not using the default values, so I'd probably create a second Mixon for the tabs. And since tabs need the 1st 2 corners to be the same and the second to be zero, I would still only need one argument. The only difference is the way I would call border radius on this site, There's only one place with cabs, so I really don't need this mix in. But if you're working on the site with different tabs, you might want to create it for yourself. One thing to keep in mind is that there are all sorts of mix ins out there that others have developed. You can think of them as plug ins. One great set of mix ins comes with Compass, which I'm not covering in this specific course, but will probably be part of a future course. Nixon's are great to use when you have a group of styles that are repeated over and over, but with slight variations between them. If you use arguments to change those values and design them with care, you can write a lot less code. 10. The Parent Selector: in this lesson, we're going to talk about the parents selector. The parent selector is simply the ampersand symbol. Anywhere you use this symbol in your code, it will be replaced with a nested parents. Electors. The parents elector can only be used when you are nesting selectors. If you aren't nesting, it won't have any meaning. The parents selector also allows you tuna pseudo classes like hover and focus. It could be used anywhere inside of the selector. This allows for some interesting options when organizing your code. Let's look at some examples. This 1st 1 is just showing a simple hover with the change of the text color. It compiles to two lines like this. The next one is similar but shows that you can use it with classes attached to your parent selector. So this becomes H three dot info. That means all H threes with a class of info will have a fun size of 1.1 ends. Note that this is not the same as just nesting the info class inside of your H three selector. That would compile two H three space dot info, which would apply to anything inside of your H three tag that has a class of info, say, possibly a span tag or something like that. This final example shows that you don't have to put the parent selector at the beginning. Here you can see the parents. Lecter's come after a class name. This pattern could be used if you wanted to style the H two tags differently, depending on what page you're on. This compiles to this. It could be a little bit hard to wrap your brain around this idea at first because you're nesting something that really isn't nested in HTML. But once you get how it works, this pattern can be useful in certain situations. Let's go to the project. I have the files open and the live preview running. I'm also already watching the SAS file. While I was preparing for this lesson, I noticed there's a problem and I'd like to fix it first. It's right here with the cart. The car should be next to the support and account links not below it. We can see the reason for this if we look at the SAS file first, I'm styling the card link based on the age rough attributes, but when we look at the link on the index page, there is no H rough equals cart. I changed it at some point cause I didn't want to link to a page that didn't exist in the site. Now, certainly I could avoid this problem altogether by just adding a class to this anchor tag. But I want to keep it in so you can see how the parents elector will work with this. When I fixed that link to, say, cart, we can see that the card has moved, but it's really still must up. So if I look at the SAS file again, you can see that I have absolute positioning on this shopping cart section. It's positioned absolutely, to the first parent item that is positioned relatively, which in this case is the header tech. That's how absolute positioning works. But you can see that I also have a negative margin on the image inside of the link, and that is what is messing it up. I also noticed that I have emergent talk. In addition to the top position of zero, I am moving the position of the link around with absolute positioning and with margins and this is making some messy CSS. This happens to me when I'm trying to get things into place. But usually I try to clean them up later, and in this case, I never did. I'm going to comment out these two margin lines and see where we're at. This looks much better, but the text is too close to the image now. I'll give it a margin right of eight pixels, and that will help give it some room, but it still isn't lined up nicely, so I'll use a line height to center it better. That looks better, but it really isn't perfect. In my opinion, I don't like that the Items line has a different baseline from the support or your account links. This area really should probably be redesigned. But since that isn't the purpose of this lesson, I'm gonna leave it for now. Now that that's cleaned up, we can start using the parents lachter. I'll start right here. Since we have a hover state, I'll move it up and replace the A with the ampersand. I'll also delete these unneeded lines. We can also ness thes two lines with the attributes reference as well we aren't saving any keystrokes here or making our code shorter, but we're keeping it organized. All of the code related to that anchor tank is in one spot. You can't see it on the screen, but we're nested inside of the header selector. So the a tag is nested inside of the account class, which is nested inside of the header tags selector. So our parent in this case is header that account A. If we look at the generated CSS, you can see that the parent selector is put right before the brackets header dot account A . You can see everywhere I put the ampersand, it replaced it with the parents selector. If I look for hover again, I can replace this one as well. In this example, I can replace the U. L L I and a selector with the parent selector because that is the parent here. If you were writing this sass from scratch, that's the kind of thing that saves a lot of keystrokes. And most people that write code love to save those keystrokes, including me. Now we can't always tell that things worked because nothing is changing on the website. Let's try changing the background color when you hover to white so that we can actually see that this is working now. When we hover, the button disappears because it matches the background color. So this is, ah, horrible design decision, and I will go back to the accent color instead. I just wanted to prove that what we're doing is actually working. I look for hover again and notice that I can't really do this one. There's no way to get that parents elector toe work here because the parent is really got new span dot overlay and what we would want it to compile. Two is dot knew a cool and hover standout overlay. We can't break the parent selector up into two pieces, which is what we would want to do here. This next one will work, though, and we also have an 80 tag with an active class. We can use the parent selector here. Also, you can see the active class has a white background and the hover class has the accent color. So let's move both of those inside the A tag and use the parent selector here. There are probably a few more areas in here that can use a parent selector, but I'm hoping that you have the idea by now. So to summarize, the parent selector is a short cut, so you don't have to re type the selector over and over again when you want to use things like pseudo classes or regular classes. My D's on your parents selector. It must be used in conjunction with Dusty, because the parents elector simply replaces the ampersand in your code with whatever parents electors you are nested inside of the ampersand can appear anywhere inside of your selector if it works with your coat. I like to use the parent selector with pseudo classes because it allows me to keep those alternate states like cover and focus right inside of my other tags, and it feels more organized. 11. Importing : in this lesson, we will talk about using the at import with sass at import. And SAS is very similar to the regular CSS at import, which allows you to break up your CSS into multiple files. The benefit of using sass, however, is that it will do the import when you're compiling or generating the code into your CSS and put it all into one file with a CSS import. The browser still has to do multiple http requests, which comes with a performance It. It's similar to having multiple links to multiple CSS files in your HTML, and that's not a great idea either. To get your multiple files to compile into one file, you need to use partials. A partial file name starts with an underscore. At the beginning, you can use at import without partials, but using partials is better, since it will give you that one CSS file for your browser toe load. The syntax for the import is simply at import and then the file name in quotes. You do not need to show the underscore in the name. If it's a partial, the compiler knows to look for partials as well as regular files with that name in our project. Let's break the SAS file up into multiple pieces so that it's easier to find things and manage. First, I like to put all of the reset code into one file. That way I can easily reuse it on other projects. The only problem I have here is that the reset base code is really in two places because I'm using a variable right here in the middle. I can't use a variable until it's defined. So I moved this part of the code below the variable definition. So I'm going to move this line that uses the variable down to the actual website styles, which is actually probably a more appropriate place. Now I'll create a new file called Underscore reset dot s CSS. I'm going to pull the reset code from the top and pull it into the partial file, and then I'll pull this additional reset code. That's below the variable definitions and put it in there as well. I've saved the file. We can see that the new file was detected, but it hasn't detected a change to the SAS file yet, so it hasn't regenerated the CSS. It won't do that until I saved the main SAS file. So I'll go back to her main file and add the import statement. I don't have to use the underscore, and I don't have to type the file type. SAS will look for all files that end in CSS s CSS or even SAS the older file format. Now, when I save this file, the style dot C s s is regenerated and over written. If we look at the CSS file, it shouldn't look that much different. The only difference will be the placement of that line. I moved, which sets the base color for the body tag. Now we can put our site specific variables and Nixon's into their own file. I'll call this set up. I'll import this file now and save it. The change was detected. If we look at the site, everything is still okay. Next, I'll create a file for the styles that belong to the entire site and are not page specific . I'll call this one main again. It's a partial, so it starts with an underscore. I like this technique because it makes it very easy to find your variable definitions and mix ins when you want to modify the design. If I want to change something, I just go to set up and can easily find the variables. If I change the accent color to red, even though I'm only watching the style SAS file, it will detect changes to any file that has been imported so we can see that change right here. And I will undo that. Since I don't really want red now, I could take this further and set up in import for each of the specific areas of the site, maybe one for the home page one for the video page, the category listing and so on. And on a real site. There would probably be more pages I really find having your code in multiple files so much easier than having to scroll through one really long file. So I really like the import statement. The final thing I want to talk about isn't really related to the import statement, but since using import can improve your website loading time by reducing the number of http requests the spinal tap, it has to do with performance a swell. It's a good idea to always men if I, your CSS and JavaScript on your production website, so I want to show you a simple way to men if I your CSS when using sass. If we look at the generated CSS right now, we can see it's not men ified its readable with lots of nice white space when developing a website. I want to see CSS like this in case I need to look at it. But once it's ready for production, it should be modified so the file is smaller and will download to the browsers more quickly . To do this, you simply need to add an option to your watch command. I'll stop watching and pull it The last command. Then I'll add a dash, dash style compressed. This will make the output compressed. It's not going to regenerate the code until I change something, so I'll just add a new line here. Now, when we look at the CSS, it's all in line with no whitespace. The file size will definitely be smaller, so we've completed all the steps to learning the basics of sass. In the last video, I'll talk about how you can continue to improve your SAS skills and share some good resource is 12. What's Next: If you have gone through all the proceeding videos, you should understand the basics of SAS by now. The good news is that knowing the basics of SAS means that you really understand the basics of any CSS pre processor. If you have the chance to work on a project using, let's say, Leszcz in the future, you will have no problem picking it up, probably in just a few minutes. The syntax will be slightly different, but the concepts are all similar. I have not taught you every last thing about sass in this course. My goal was to get you up and running with the most useful concepts, and to get you over any fear or dread you might have about having to learn yet another language or framework. Once you feel comfortable with what I've taught here, if you want to take your learning and skills a bit further, you can investigate the concept of using math and functions, And SAS SAS comes with a number of built in functions that you can use in your code. Many of these can be used for working with color, such as lighten or darken. They could be used in a mixing for ingredient. For example, there are also functions that can help you create responsive websites by using math. It's also possible to create your own functions. I also recommend just reading the full SAS documentation. You can find that on the SAS website as well. If you want some ideas on how to incorporate SAS into your workflow, I recommend watching this video by Nathan Henderson on Sass and Compass. It's only 16 minutes, and it's a good review of the concepts taught here, with some additional ideas presented. I did everything in this course the old fashioned way, using the command line. I believe it's good to learn new tools in the most basic format so that you really understand what's going on. But once you have that foundation, I think using some of the tools that make things easier is just fine. Here are some tools that you might want to explore Scout, which you confined here code kit, which is for Max on Lee. But it's useful for much more than just SAS and pre press, a new open source project that works on Windows and it's supposed to be similar to code kit . You will want to make sure that your text editor can handle the dot s CSS file extension brackets knows that dot s CSS will be using the CSS in tax for the most part, and it handles it. Okay, but many text editors can handle it even better. And you confined plug ins or extensions to get better code, completion and more. Do some investigation to make sure your editor of choice is set up in the best way possible for sass. It probably won't be set up correctly on a fresh install, but it is worth the time to make sure your editor helps you code efficiently. I've mentioned Compass a few times in passing already. Compass is a CSS authoring framework that uses sass. It comes with a lot of built in mix ins for CSS three properties, typography and much more. So you don't have to build these from scratch yourself. It also has tools for creating image sprites and creating the proper CSS for them. There's a lot to learn with compass, and I may try to do a course with it in the future. When I have time, it's very useful, and when you want to take your SAS skills to the next level. I recommend exploring Compass. I taught this class by converting an existing project to sass from regular CSS. I like this approach for learning sass, because you can compare the Sasko to see us us, and you can do the conversion and small steps. I recommend that you try converting one of your sites to using sass to make sure you understand all the concepts. This won't save you any time in the beginning, but when you want to change the site later, you're going to have a great foundation for quick changes. If you use ass on the next site you develop, you'll be able to write your code more quickly, and it will be a lot easier to maintain. Remember, you can pick and choose which parts of sass you want to use. Regular CSS is valid SAS code, so use the parts you like, and as time goes on, you can learn and incorporate more ideas for building websites faster. Thanks for watching this course. I hope it's helped you pick up one more of the many skills needed for doing Web development . I think those few hours lost learning. A new skill like sass will be gained back very quickly because you'll be able to develop much faster in the future. I hope you enjoyed the course. If you have any questions, please ask and I will try to help.