Sass is a CSS meta-language that saves time, and allows you to write better quality code. In Step by Step Sass, you'll learn how to use this powerful pre-processor in easy 5-10 minute steps.
You don't need to understand every concept of Sass to use it—once you get past the installation and set up, you can start using it right away.
Coding your CSS with Sass saves you time—and allows you to write neater, more consistent code. The time you'll spend completing this course will be easily made up on your next web project!
Hi, I'm Lisa Catalano, and this is Step by Step Sass.
I created this course for people who know CSS but have not tried a CSS pre-processor yet. I know how overwhelming working on the web can be. Almost everyday you hear about some new skill that you should learn to stay up to date. Every time you feel like you are getting good at one thing you turn around and the best way to do something is completely different.
I will be honest and let you know that I did not want to learn Sass. I was very busy in my job creating a brand new website using back-end and front-end 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 Sass. I love learning new things, but I didn't think I had enough time to learn Sass without being slowed down.
I'm happy to now say, that I was completely wrong. Learning Sass was very easy, and I grew to love it within one day. I can't say that about very many of the web technologies I've tried to learn over the past 5 years. Sass 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 to learn this valuable skill.
So, what is Sass?
Sass stands for Syntactically Awesome Stylesheets
We will be using the .scss file format in this class. It is the easiest to get used to and it makes it very easy to convert an existing web-site over to using Sass.
Some of the nice things you can do with Sass are:
There are other CSS pre-processors that you can use besides Sass. Less is the most common alternative, and Stylus is another option that has a smaller following. It is not hard to switch over to using a different pre-processor once you know one. So anything you learn in this class, should translate easily to another pre-processor. Sass 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 thing someone come up with. The point is that once you understand how a pre-processor works you have that skill, regardless of the specific language chosen.
Sass is written in the Ruby language, so you will need Ruby installed on your computer. However, you do not need to worry about having Ruby installed on your web server. You only need it where you will be writing your CSS. We will talk about the installation of Ruby and Sass 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 one step at a time and just focus on one new concept a day. The choice is yours. Either way you should be able to get through this class quickly.
So let's get started.
Please Note: If you are using a Mac computer, if you have trouble installing Sass, you might have to install as a SuperUser with this command:
sudo gem install sass
In this video we look at how to get Sass installed on your computer. The steps will be slightly different depending on your operating system. I demonstrate installing the pieces you need on a Windows machine.
Installing Sass 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 would encourage you not to worry about it and to just follow along with the steps that I present. There is a lot of power to be gained to understanding how to use the command line, and you won't have to spend a lot of time there to use Sass, but it helps if you understand what it is and how it works.
There are a lot of tools out there that allow you to avoid the command line, especially if you are on a Mac. But, I'm going to focus on the command line in this class, because it is really valuable to get over that fear or dread you might have of using it.
The first step is to install Ruby. I want to make clear to you that you do not need to have Ruby installed 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 the web server.
That was one thing I was concerned about when I first started using Sass, and it turns out it wasn't anything I needed to worry about. The Ruby programs will convert your Sass files into CSS files and that is what is going to go on your web server.
If you are on a Mac, you already have Ruby installed with your operating system.
If you are on Windows you need to go to rubyinstaller.org/downloads and download the most recent version of the installer, and follow the steps. I will demonstrate that process.
If you are on Linux, you need to install the Ruby package.
Windows users only:
So, I'm at the website, and I'm going to choose the first download link because that is the most recent version. There are other things that you can install but it is just the main installer - the one at the top that you want.
After it is downloaded, you can click on the download file to install.
You can accept all the defaults. But the only thing you really need to pay attention to is you do want to check the "Add Ruby executables to your PATH.
Now, I'm turning it off for myself because I don't need it, but you probably will want to have it turned on.
What that does it is let the command line always know where your Ruby installation is.
If you have any trouble, please post a question and I will try to help.
The next step is to open the Command line.
If you are on a Mac, you need to find the Terminal program. If you are not sure where that is, you can type that in to the spotlight and type in 'terminal' and it will find it for you. You may want to dock this so you have access to it always.
If you are on a linux, you are probably already there and don't need me to tell you what to do.
I'll demonstrate on a Windows machine how to get there.
I'm going to the Start button and typing "CMD". I can find it that way, or I can go to All Programs and find the folder where Ruby was installed. And I can use "Start Command prompt with Ruby.
The next step is to install Sass. We install Sass using the Ruby gems. Gems is a package manager for Ruby extension. Sass is a Ruby extension. It was written in Ruby. This is a way that you can install programs and extensions using the command line instead of having to go to the website, download the files, extract them and install them. So it is much quicker if you get used to installing things this way. So it is a nice little feature of Ruby.
The command is simple and the same on all operating systems:
gem install sass
It might take a minute or so to install but it is usually pretty quick.
And now it is installed.
The final step is not really a step that needs to be done - it is completely optional. But one thing I like to do after I install something is to check the version and make sure everything installed ok. So you just type
ruby -v for checking the Ruby version.
sass -v for checking the Sass version.
You can also type -h to get a listing of all the Sass commands.
So Sass is installed now and we are ready to go. I would probably leave the command line open because you will need to use it to compile your Sass files.
In the next movie we will look at the project we are going to work on in this class.
You can download the code for the project by clicking on this link.
You can also go directly to my the github repository for the project , where you can track each step, and get a specific version of the project.
We are going to work on a real project in this class. Not a real web site but something a little bit more substantial than just a bunch of little demos.
We will be using a project that I designed a few years ago for a design class. It's not a live web site but it has a few pages and it is enough for us to actually to convert to Sass and see the benefits of using it to write our CSS.
I have a link to the starting code for this project listed in the lesson notes. But you can also get the code from my github 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 the 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 will be moving fairly quickly and won't completely convert everything in the code to Sass. I will 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 will be using Brackets as my editor. It is a free open source editor from Adobe. I chose it because it has a nice live preview of your code when you use 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 it has some additional pages. There are some transitions in the navigation and hover states. If you click on the first video you can get to an instructor page, which has some tabs with different views there. And there is a category page right if you click on the Workout Types link.
It's three pages and its 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,
so there are some better techniques that we could use. 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 starting place to try to use some Sass.
Your first attempt at using Sass on your own may be to incorporate it into a site that you have already written some CSS for, so I thought this would be a good approach for learning.
You don't need to use 100% Sass for your code. You can write normal CSS and sprinkle in some Sass techniques while you are still learning the concepts. As you become more comfortable with the techniques I'm teaching here, you can start writing you code in SASS from the beginning and that is when it becomes very powerful and quick.
If we take a quick look at the code, we are not going to focus on all of it. The main file we will focus on it the main css file which is called style.css. If we look at the html we can see that
we are linking to a few css files. This ie only file, which may not even be needed anymore depending on what versions of IE you are supporting on your site. There is also a handheld css file which is used to display the site in smaller viewports. This is not a true responsive site, but it does have a slightly different look for smaller viewports if someone is viewing the site on their phone.
If you would like to see the live preview work, you can see if I change some text in the html... I will change New Releases to Latest ... It will change right away in the viewport.
So this the project we 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. If you don't want to do that, you could try opening up one of your own websites and try to follow along making changes in your own code.
In the next lesson we will convert this site to use Sass.
In this lesson we are going to learn how to compile Sass files.
I'm going to call .scss files Sass files from now on, because it is much easier to say. And it will be less confusing when comparing it .css files.
When working with Sass, you do your work in the Sass file, which then gets compiled into a .css file for your web pages.
Compiling Sass involves a simple command typed in on the command line.
After changing into the CSS directory of your project, you type:
sass (which means you are going to run a Sass command)
two dashes (which invokes a Sass option)
watch (without a space before it. This is to say you want to watch a file)
style.scss (this is the file you want to watch)
: (to indicate you are done listing the files to watch)
style.css (where you want the output to go)
This command takes your sass files, whether they have the .scss or .sass file extension, put them through the compiler or pre-processor, and spits out the css file.
So, let's try it. I have my editor open. You can see that I'm linked to style.css. I'm also linked to handheld.css which we are not going to change yet.
I'm starting up the web page by clicking on the Live Preview button. So here is the page and everything looks like it should.
Now I'm going to rename the .css file into .scss. The live preview isn't handling this, so I do have to refresh the page. When we look at the web page it is now just showing the plain HTML rendered, because the css isn't there anymore.
Let's fix that by using the watch command.
I'm bringing up the command line and going into the css directory for the project. If I type dir or ls on Mac/Linux I will see all the files in my directory, including the style Sass file.
So now we can compile the Sass file into regular css. We need to type:
sass (two dashes) watch (without a space) then style.scss:style.css
Now you can see that the command is running. It created our style.css file. It says 'overwrite style.css'. Every time it writes to the css file it will say that. Notice that we are not getting the command prompt anymore. Sass is just sitting there, waiting, or "watching" for changes to our Sass files. When it sees changes it will re-create the regular .css files.
There is another problem in Brackets. It is a still a new project so it is not perfect yet. But it does not recognize when I have new files added to the directory.
So it is not finding the .css file yet. So I need to close it and re-open it. And now I can see it. (Note, this is no longer a problem with current versions of Brackets).
I have to restart the Live Preview. And now we can see the website is back to normal because there is a .css file. Nothing has changed, we haven't made any changes to the website. But if we look at the Sass file and the .css file they will look almost exactly the same. There are going to be some formatting and spacing differences but other than that they are the same. And they should be the same because we aren't using any Sass syntax yet.
Now if we want to see how this works, we can change something in the Sass file. I'm going to the body selector and changing the background color to red.
Before I save the file I want you to look over at the command line. When I save it, notice what happens there.
The Sass file changed, so it rewrote the css file. You can see it says "overwriting".
It looks like the Live Preview isn't detecting the change, so I'm going to click on the browser window. And now it sees the change and changes the style.
And then I can set it back to normal and we can see the change detected again and the background color changes back.
So that is how you use Sass. Whenever you are going to be modifying your css you have to remember to start up the watch command. You leave it running in the background while you are working, and you don't really need to pay attention to it unless there is a problem.
To summarize, you start up the sass watch command, make changes in the .sass files, and Sass will create your css for you.
The first feature of Sass that I want to talk about is variables. Because variables are what sold me on Sass. If it was the only feature of Sass, I would still want to use it. CSS is eventually going to have variables, but it doesn't yet, and of course even once they are implemented it will take some time for all browsers to be on board.
So lets see how Sass variables work and how you can speed up your development with them.
You define a variable with a dollar sign. You can 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 true or false, depending on where you will use the variable.
To use the variable, you must define it first, then use it 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. I 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 makes that unnecessary because we can easily change the color in one place if we need to. So let's try making our colors into variables.
I'll move this comment down to where I want the variables defined in the code.
Next I'll give the variables meaningful names. It is 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 to find every place I use those colors, and replace them with the variable reference. I just need to be careful to not replace the variable definition color.
And I did change the definition so I need to undo that.
Now I will make sure I'm watching my css files from the command line. I can go back to the editor and save my changes.
And it looks like there is an error. The message is telling me the problem is on line 29, so I will 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. I usually put them at the top, after the reset css to avoid this, but I missed the correct spot.
So this time it worked, and if we look at the css, you can see that where we defined the variables, there is no code there, because that isn't valid css. Instead it looked for the variable name anywhere in the code and replaced it with the variable's value.
If we look at the website, the colors still look good.
We can also make a variable for the font. I don't have a lot of font declarations in my css because I just changed the body's font and it cascaded throughout the entire page. But we can show how you would do it here.
I'll make a variable called basefont and use it on body.
So all of this isn't very exciting. Converting css to use variables isn't that amazing and still some work. The power is when you decide 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 variable's value, and now it is a brighter color. And I only have to change it there. Just in that one place. That is the power of Sass, and what makes it powerful to me. It is very 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 so the colors are off a bit, so those would need to be changed as well. If I were doing this website today, I would make the images white with transparent background, and then color the background with 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 that 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 see how things look.
You don't need to be in Photoshop to play with your design.
So to summarize, to declare a variable, just remember to define it at the top, start with a $ before you give it at 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 variable's value.
In the next lesson well talk about how Sass handles comments a little bit differently than regular CSS.
In this video I just 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 Sass comments.
In CSS you put comments inside of a /*. You have to close out your comment with an */ . This is a very common syntax for comments in many programming languages. Comments can span multiple lines this way and that can 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. Sass allows you to use single-line comments instead, which I find easier to add. 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 common syntax 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 Sass files. The single-line comments will NOT be added to your CSS. The multiple-line comments will get get added. Personally, I try to just use the two slashes, because I don't need comments in my css. I need them in the Sass files, where I edit my code.
So, I have my Sass file open and I am watching for changes to the Sass file. If we look at the existing code, you can see all the comments are showing as gray. Thats because the theme of my text editor sets comments to gray. These are all multi-line type because that was necessary when this file was a regular css file.
I'm going to change all my comments to the single-line type with two slashes.
I'll leave this comment as a regular css comment so we can see the difference when we save the file.
When we look at the css, you can see that there are very few comments there. There is the one that I wanted to save and a few that I missed.
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 the sass style comments will let you comment your code as much as you want to, without adding the to the actual css file.
Nesting is a feature of Sass that allows you to nest your selectors inside of other selectors.
You can also nest sub-properties of things like 'font', 'background' and 'border'. You can see here, we are nesting 'family', 'size' and 'weight' inside of the font brackets. I don't actually use this syntax, because I generally prefer to use shorthand syntax, but some people find it useful.
So, let's use some nesting in our project.
We can see that the first non-reset or base selector is body. Now this is where we could create some trouble. Everything on your page is going to be a child of body. So, you could nest all of your selectors inside of the body selector. But we don't want to do that. There is 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 nest it. So we will leave that section alone.
We have a similar situation with 'container' which is the 960px wide white container of the page content.
So this brings up an important point. One of the complaints about Sass is that it encourages bad CSS. I'm not sure that this is true, but one reason it could do that is because of nesting. Using nesting makes it tempting to nest everything. Because it looks so nice and organized. But you should only nest your selectors if you need the specificity. I have found when working on larger websites, that if I only add more tags, classes and ids to my selectors when I really need them, my CSS is easier to maintain and work with.
A common goal that people cite is to keep your nesting to 2 or 3 levels. Of course this is just a guideline, and I might be breaking that here. On a smaller site it isn't that important, but when you start working on large-scale web-sites, with lots of CSS this does become more important.
So, I'm going to focus on the 'header' area first. It is possible I don't even need to include 'header' in all my selectors here, but I'm not going to refactor the code right now other than to trying to convert it to Sass.
So I'll start with this h1 and move it up and indent it to make it clear that I'm nesting. Then I will remove the word header from the selector. If I left it in, the css would not be correct, because it would compile to 'header header h1', instead of just 'header h1'.
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, indent, and replace the word 'header' with nothing.
Now it looks like this selector wasn't grouped with the other ones, so I will move it as well. And it looks like I have two different header p selectors in my code. I only need one selector so I'll fix it. This is a nice benefit of doing this change, because it helps you clean up your code and organize it so you can find these problems.
I'm going to move it higher, because I like to keep my tag less specific selectors at the top.
Now I can do some more indenting on account. It is likely I don't need to nest the class account inside of header on this small 3 page site. But if it became a real site, I might need that specificity, so I will leave it in.
Now, I need to make sure I am watching for changes to see if I made any mistakes. I will save the file and it looks like everything compiled fine. And a quick look at the header shows that things are still working ok.
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 are still several things that you can work on, like the nav area, the sidebar, listing area, player and more.
So I'll show you what I changed here. I nested the nav area. I nested further on the ul and li selectors.
The one thing I did not nest was this, which has a comma separating a footer selector. So there are two separate selectors on this line. So I didn't want to nest that because it would mess up the footer selector.
I did the footer, the #type section which is for the overlay menu here. I nested the player_nav code which is part of the second page. And there were a few more spots I nested. If you want to see the full state of my code I will be sharing the link to the code on github so you can compare your changes to mine.
The final point I want to make is that when first learning Sass it is always a good idea to 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 header area, you can see that the css output looks like the original code. We see 'header h1' again. If we look at the nav area, we can see 'nav ul li a' and the full group of selectors on the line.
The only real difference is the indenting in the new file.
Nesting is a useful feature of Sass, because you can type less, especially when you are creating your css from scratch. It helps keep your code organized and easier to read and maintain. It should be used with caution however. Remember to only nest when you need to. Less specific selectors are generally easier to maintain when you are writing your css.
** Please get the demo code from the link at the bottom of the lecture transcript below.
In this video I am going to talk about the extend command in Sass.
Extend is a way for a selector to inherit all the properties of another selector. It prevents the need to duplicate code. It can 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 the "special" button.
You can see when the Sass is compiled, it just adds the .special class to the button selector, and it only leaves the unique properties on the special class selector below.
Writing your code with extend will allow you to keep your code shorter and more organized.
Before we go into our project, lets 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 "cta" for "Call to Action". There is also a test.scss 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 does not exist yet. So that's why our page doesn't have any styles. We can create the css by watching the test.scss file.
It is the same command we have used already, but this time we are replacing the word "style" with "test".
There has been an update to Brackets since I started filming this class, so I can now hit F5 and refresh the folder.
So now I can see test.css without closing and re-opening my text editor. If I click on live preview, you can see the styles on the button. So far, there is nothing new here.
Now if I want the Call to Action DIV to look like my buttons, even though it isn't actually a button, I can use the @extend command. So in the sass file I will use the class selector "cta" and type @extend button.
This means all the styles from button, will be applied to anything with the 'cta' class.
When I save it, and click on the browser to make sure it recognizes the change, you can see the div now looks like the button, with the exception of the fact that the width is 100% of the viewport, instead of normal button size. That is because we are dealing with a DIV instead of a button.
It is always good to look at the CSS generated, and we can see that the .cta was added to the list of selectors on the button.
So I can add a width to the CTA class and make the text center aligned. I'll save it. And we can see the changes in the browser. Let's look at the CSS. The unique properties to .cta class are now in their own block of code. The properties that are shared because of extend, are still grouped together.
Now let's look at our project and find places to use @extend.
I will 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 that is a CSS3 property there are multiples 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 am only transitioning the background-color here. I am using a duration of .3 seconds and the easing type of ease in. If you are not familiar with transitions, a transition is smooth change from one state to another. So we can transition between colors, sizes and more.
Usually these are done when the styles change on a 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 is a transition on the new arrivals with a little pop-up with the type of workout and name. This transition uses "all" because it is transitioning other properties and not the background color. If you say "all", any properties that are different on hover, will transition. In this case, we are really transitioning the position and opacity of the box to bring it in to view.
In general it is best to target the properties you are actually transitioning instead of using "all" for performance reasons. But the reality on this small site is it is not really going to hurt, so I am going to use "all" in my transition setup 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 am 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 am calling it this because it makes sense.
I will copy the 4 lines of code here, using the "all" for properties to transition.
Now everywhere I had the transition code, I will simply replace that with '@extend .transition'.
Now I will save it and let's look at the CSS. You can see that after my transition class I have the 4 selectors where I extended transition. They are all grouped together here, using the same transition code. If I look 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 that the .transition class is not 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 have it though is because we need a base selector to set our transition properties on. In early Sass, you had to accept this, 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 is kind of like a super variable. You define a placeholder with the '%' symbol and then the name. Then you define all the properties you want the placeholder to have. 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 symbol. We do have to change this everywhere we extend the 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 things using the transition are the 4 selectors that need it. It is a small change, but it makes your css more accurate, and you don't create unneeded selectors with a placeholder.
So to summarize, @extend is a great way to avoid a lot of code duplication. It is especially useful for CSS3 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.
** Note, please get the demo code at link below the transcript.
A "mixin" is another way to organize code that is duplicated over and over in your css. It is similar to @extend, but with mixins you can specify different property values by passing in arguments.
It is different than extend in that the entire block of code from your mixin will be copied to the selector. This can make your code longer.
Use it when the values of properties are different throughout your site. If they will remain the same, use @extend instead.
Let's start right away with an example. I am in text_mixin.html which has 3 divs 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 will start with them all having the same size. Each div has a unique class name and some text. It links to test.css which does actually exist in my folder, but none of the existing CSS will style this current html. So if we look at the Sass file... It is the same file that we ended up with after the last example. I do want to set a basefont on the body of the file, so all text will use the base font instead of Times Roman here. I'll use the variable $basefont which is already defined.
And I will watch the test sass file. And now you can see the font has changed.
Now instead of starting with a mixin, I'm going to review how we would do this with @extend. What I want is to create some boxes for each div. I will use the placeholder syntax and say %box and then give it properties. A width, height, 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 divs. I am making them 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 will save it, click, and 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. @extend creates nice concise code.
Now let's try it with a mixin instead. So the syntax for that is @mixin and then you give the mixin a name. So I will say "@mixin box". For each box, I have to change it to say @include box.
When I save it, nothing has changed, as we expect. If we look at the CSS however, it looks different. Each individual class has all the properties from box added to it. There is a lot of duplication.
The reason I am showing you this is because this is a mistake I made a lot when I first started using Sass. I learned about mixins first, and so I used them everywhere I had duplicated code. But using a mixin doesn't keep your final CSS smaller. Using @extend, creates tighter code.
But mixin is very useful for those times when you want the ability to change the values of your properties. So in this example, I want a mixin that will allow for different box sizes. So I will add parameters (or arguments as they are officailly called in Sass) for the width and height. You do that by adding parenthesis after the name, and putting the arguments inside. I will add width and height with a $ before the word to indicate that these are arguments. Each argument you add is separated by a comma. Now I need to use the arguments in my mixin. So the width will be whatever is passed in from where the mixin is called.
Normally, I like to give a default value to my arguments. That way if the code calling the mixin doesn't pass a value, the mixin will still work. To do that, you type a colon after the argument name, and then you give the default value. In this case, I will leave the default at 100px.
So again, I save and look at the page, and nothing has changed, because the width and height are still 100px.
Now this time, I will change box 1 to have a width of 50px and height of 200. When I save it, you can see the change. I can change box 2 and just pass in one parameter. That will be assigned to the width.
The arguments are optional when I give defaults. We can create arguments for anything in the mixin that has a value. We could do the margin, padding or background color here. If you want to practice some more, you might want to try making those arguments.
So, you can create mixins without arguments in Sass. But if you find yourself doing this, stop and consider if @extend is what you really wanted to use. If you don't need to change the values, then @extend is probably what you need. If you do need to change the values, then mixins can be very useful and powerful.
Let's look at our project now and see if we can create a mixin 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 this a perfect candidate for a mixin.
I should say that when this design was created, it was important to use all the vendor prefixes for border-radius. However, that is no longer the case. All the major browsers are using border-radius today. The only thing you need to worry about is early IE browsers, like IE8. I am using CSS3Pie which is the PIE.htc file right here. To make border-radius work in IE, I need this behavior statement. So today, we really only need 2 lines of code for rounded corners.
But I'm going to leave this example is as is for now. If I use a mixin to define my rounded corners and the code changes over time which it has with border-radius, it is so easy to just modify it in one place.
I'm going to copy these 5 lines of code and create a mixin with them. I'm going to the top where I created my placeholder for transitions and variables, because I like to keep them together.
To create the mixin I type @mixin and then the name, which I will call "rounded". Then parenthesis for the arguments. And I'll paste in the 5 lines. I'm only going to add 1 argument, because I'm keeping all the radius values the same. I will default it to 7px because that's a value I used in several places already. It could be anything though. Now everywhere I use that value, I have to change the 7px to '$radius'.
Everywhere I am using border-radius with only one value, I will include this mixin to replace the 5 lines of code. On this first one, I don't need to pass a value in, because I want it to be 7px which is the default.
And this next one as well.
Now for this one, I do need to pass the radius which is 10px.
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 mixin later if I wanted to.
And then I'll go through and change all the rest.
Now I'll 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 all rounded.
I think everything looks good.
Let's look at the CSS generated. If I search for border-radius, I won't find the mixin definition, but I will see it in all the places where I needed a rounded corner.
Now here is the nice part. If I want to improve my CSS because I don't need all those vendor prefixes, I can simply change the mixin. And the code will get changed everywhere the mixin is included.
After I save and look at the CSS again, you can see there are only 2 lines of code being used here. And that was changed everywhere I used the mixin. It wasn't changed on the tabs, because I didn't use a mixin there. But everywhere else it has changed.
If you wanted to create a mixin for the tabs, you have a couple options.
One thing you could do is change the rounded mixin to have 4 arguments, one for each of the corners, and then you can specify the radius of each corner. I don't really love this method though, because then you have to specify all 4 corners every time you call the mixin, if you are not using the default values.
So I would probably instead create a 2nd mixing for the tabs. And since tabs need the first 2 corners to be the same, and the 2nd to 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 is only one place with tabs, so I don't really need this mixin. But if you are working on a 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 mixins out there that others have developed. You can think of them as plugins. One great set of mixins comes with Compass which I'm not covering in this specific course, but will probably be part of a future course.
Parent Selector (&)
In this lesson we are going to talk about the 'parent' selector.
The Parent Selector is simply the &.
Anywhere that you use this symbol in your code, it will be replaced with the nested parent selectors. The parent selector only can be used when you are nesting selectors. If you aren't nesting, it won't have any meaning.
The parent selector allows you to nest pseudo classes like hover and focus. It can be used anywhere inside of the selector. This allows for some interesting options when organizing your code.
Let's look at some examples.
This first one is just showing a simple hover with a 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 h3.info. That means all h3's with a class of info will have a font-size of 1.1 ems.
Note that this is not the same as just nesting the info class inside of your h3 selector. That would compile to h3 space .info, which would apply to anything inside of your h3 tag that has a class of info, possibly a span tag or something like that.
This final example is where you don't have to put the parent selector at the beginning. Here you can see the parent selectors come after a class name. This pattern could be used if you wanted to style the h2 tags differently depending on what page you are on. This compiles to this.
It is a little bit hard to wrap your brain around this idea at first, because you are nesting something that really isn't nested in the HTML. But once you get how it works, this pattern can be a useful in certain situations.
Let's go to the project.
I have the files open and the live preview running. I am already watching the Sass file.
While I was preparing for this lesson, I noticed there is a problem, and I would like to fix first. It is right here with the cart. The cart should be next to the support and account links not below it. We can see the reason for this if we look at the Sass file first. I am styling the cart link based on the href attribute. But when we look at the link on the index page, there is no 'href = "cart"'.
I changed it at some point because I didn't want to link to a page that didn't exist in the site. Certainly, I can avoid the problem altogether by adding a class to this anchor tag, but I want to keep it in so you can see how the parent selector will work with this. When I fix that link to say "cart", we can see the cart has moved, but it is still messed up.
So if I look at the Sass file again, you can see that I have absolute positioning on this shopping cart section. It is positioned absolutely to the first parent item that is positioned relatively, which in this case is the header tag. That is how absolute positioning works. But you can see that I also have negative margin on the img inside of the link, and that is what it messing it up. I also notice that I have 'margin top' in addition to the top position of 0. I am moving the position of the link around with absolute positioning and with margins. This is making some messy CSS. This happens to me when I'm trying to get things into place, but it is a good idea to clean things up later, and I never did that here.
I am going to comment out these two margin lines and see where we are at. This looks much better, the text is too close to the image. I'll give it a margin-right of 8px, and that will help give it some room, but it still isn't lined up nicely. I'll use a line height to center it better.
That looks better. It really isn't perfect, and I don't like that the items line has a different baseline from the support or your account links. This area should probably be re-designed, but since that isn't the purpose of this lesson, I'll leave it be for now.
Now that that's cleaned up we can start using the parent selector. I'll start right here since we have a hover state. I'll move it up and replace the 'a' with the &. I'll also delete these unneeded lines. We can also nest these two lines with the attribute reference up as well.
We aren't saving any keystrokes here or making our code shorter, but we are keeping it organized. All of the code related to the anchor tag is in one spot.
You can't see on the screen, but we are nested inside of the header selector. So the 'a' tag is nested inside of the '.account class', which is nested inside of the header tag selector. So our parent in this case is "header .account a".
If we look at the generated css you can see that the parent selector is put right before the brackets: 'header .account a'. You can see everywhere I put the & it replaced it with the parent selector.
If I look for hover again, I can replace this one as well. In this example I can replace the 'ul li and a' tag with the parent selector, because that is the parent here. If you were writing this sass from scratch, this is 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 web site. Let's try changing the background color when you hover to white, so we can actually see that this is working. Now when we hover, the button disappears because it matches the background color. So that is a horrible design decision, and we will go back to the accent color instead. I just wanted to prove that what we are doing is actually working.
I'll look for hover again, and notice that I can't really do this one. There is no way to get the parent selector to work here because the parent is really '.new span.overlay', and what this should compile to is '.new a:hover span.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 'a' tag with an active class. We can use the parent selector there as well. 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 of the A tag and use the parent selector here.
There are probably a few more areas in here that can use the parent selector, but I'm hoping that you have the idea by now.
So to summarize, the parent selector is a shortcut so you don't have to re-type the selector over again when you want to use things like psuedo classes, or regular classes and id's on your parent selector. It must be used in conjunction with nesting, because the parent selector simply replaces the & in your code with whatever parent selectors you are nested inside of. The & can appear anywhere inside of your selector if it works with your code.
I like to use parent selector with psuedo classes because it allows me to keep those alternate states like hover and focus right inside of my other tags and it feels more organized.
In this final lesson we will talk about using the @import with SASS. @import in SASS is very similar to the regular CSS @import which allows you to break your CSS into multiple files. The benefit of using SASS however, is that it will do the import when you are compiling the code into CSS and make it one file. With a CSS import the browser has to do multiple HTTP requests which comes with a performance hit. It is similar to having multiple links to multiple CSS files in your HTML Head, and that is not a good idea either.
The syntax for the import is simply @import and then the filename in quotes. You do not need to show the underscore in the name. The compiler knows to look for partials as well as regular files with that name.
In our project, let's break the css file up into multiple pieces so that it is 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 multiple projects. The only problem I have here is that the reset base code is broken up in multiple places because I am using a variable right here. I can't use a variable unless it is defined already, so I moved this part of the code below the variable definition.
So I'm going to move this line down to the actual website styles, which is a more appropriate place for it anyway.
Now I will create a new file called _reset.scss. I'm going to pull the reset code from the top and put it in the partial file. And then I will pull the additional reset code that is below the variable definitions and put in the reset as well.
I'm saving the file. We can see that the new file was detected. But it has not detected a change to the style sass file yet and regenerated the CSS because I have not yet saved the main SASS file.
So I will go back to our 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. Sass will look for all files that end in .css, scss or even .sass the older file format for sass.
Now when I save this file, the style.css is regenerated and overwritten. If we look at the CSS file it shouldn't look much different. The only difference will be the placement of that line that I moved which sets the base color for the body tag.
Now we can put our site specific variables and mixins into their own file. I'll call this setup. I'll import this file now and save. The change was detected. If we look at the site, everything is still ok.
Next I will 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 is a partial so it starts with an underscore.
I like this technique, because it makes it very easy to find your variable definitions and mixins when you want to modify the design. If I want to change something I just go to setup and can easily find the variables, etc. If I change the accent color to red, even though I am watching the style.scss file only, it will detect changes to any files that are imported. You can see that change here.
I'll undo that now.
Now I could take this further and set up an import for each of the specific areas of the site. One file for the home page, one file for the video page, and one for the category listing. And on a real site, there would be more pages.
I find having your code in multiple files much easier than having to scroll through a very long file, so I love the import statement.
If we look at the generated CSS right now, we can see that it is not minified. It is readable with lots of nice white space. When developing a web-site I want to see the CSS like this. But once it is ready for production it should be minified so the file is smaller and will download to the browser more quickly.
To do this you simply need to add an option to your watch command. I'll stop the watching and pull up the last command, then I will add --style compressed. This will make the output compressed. It won't regenerate the code unless I change something, so I'll add a new line here.
Now we we look at the css it is all in one line with no whitespace. The file size will be smaller. On a small website this may not be as important, but once you start working with larger websites, it is a step you should do when you deploy a website.
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 Sass skills and share some good resources.
Here are some useful links referenced in the video.
The Sass Way blog: http://thesassway.com
If you have gone through all of the preceding videos you should understand the basics of Sass.
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 have taught here, if you want to take your learning and skills a bit further you can investigate the concept of using math and functions in Sass. Sass 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 mixin for a gradient 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. To see more about Sass Functions go here:
I also recommend just reading the full Sass documentation:
It is usually not fun to read documentation, but you can often pick up a lot of knowledge from doing just that.
If you want some ideas on how to incorporate Sass into your workflow, I recommend watching this video by Nathan Henderson on Sass and Compass. It is only 16 minutes and a good review of concepts taught here, with some additional ideas presented.
Command Line or GUI Tools
I did everything in this course the old-fashioned way, using the command line. I believe it is good to learn new tools in the most basic format so that you really understand what is 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 you might want to explore:
CodeKit: http://incident57.com/codekit/ (for Macs only, but useful for much more than just Sass)
Prepros: http://alphapixels.com/prepros/ (a new open source project that work on Windows and is supposed to be similar to CodeKit)
You will want to make sure your text editor can handle the .scss file extension. Brackets knows that .scss will be using the .css syntax for the most part and it handles it ok. But some text editors can handle it even better and you can use some plugins or extensions to get better code completion and more. Do some investigation to make sure your editor of choice is set up the best way possible for Sass. It probably wont 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 mixins for CSS3 properties, typography and more. So you don't have to build them from scratch yourself. It also has tools for creating image sprites and creating the proper css for them. There is a lot to learn with compass, and I may try to do a course with it in the future when I have time. It is very useful and when you want to take your Sass skills to the next level, I recommend exploring Compass.
Using Sass in the Future
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 Sass code to CSS and you can do the conversion in 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 will have a good foundation for quick changes.
If you use Sass on the next site you develop you will 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 Sass code, so use the parts you like. And as time goes on you can learn and incorporate more ideas for building web-sites faster.
Thanks for watching this course. I hope that it has helped you pick up one more of the many skills needed for doing web development. I believe those few hours lost learning a new skill like Sass will be regained very quickly because you will be able to develop much faster in the future.
I hope you enjoyed this course. If you have any questions, please ask and I will try to help.
I'm a web developer, designer, teacher and lifelong student. Keeping up to speed on technology is a challenge these days, and I like to try to focus in on what is most important and useful.
My full-time job is creating the front-end of an internal enterprise web application using Backbone/Marionette and other front-end technologies. I teach Photoshop to designers at community college and I work on small websites when I have time.