Getting Started with Sass
What is Sass?
Sass is a CSS language. CSS is a subset of Sass, which means that by writing CSS you’re already writing valid Sass. It just extends CSS. Sass is not an acronym, but there is one for it (syntactically awesome stylesheets).
A compiler works by taking an input and turning it into an output. Browsers understand CSS, but not Sass. So, Sass gets compiled into CSS. Sass is for developers, and CSS is for the browsers.
Installing and Using Sass
Sass was built with ruby, so you need it to install it if you’re on Windows or Linux. Mac comes with ruby by default, so just open the command line and write gem install sass. The user I was signed in as didn’t have permission to do that, so I had to sudo before it.
To check if it installed and to see what version you have, enter sass –version.
We’ll then start by making our first empty test Sass file, which ends in .scss. Then, in the console we write sass, then the file name.
It gave us nothing, because there was nothing in the file. So, let’s add some stuff to the file and rerun it.
If you don’t feel comfortable with the command line, the scout app will take care of this for you.
Working with this long term, we want to enter sass –watch ., which will actually create a CSS file for you, and update it every time you update and save your .scss file. So, it compiles Sass while you work.
There are different ways to install depending on the language you’re using. There are two versions of Sass, one is LibSass, a more portable version, and the original.
Nesting Selectors
We have a sample site and have set up our scss and css files, using the sass –watch . command from before.
Let’s say we set up some styles using a class and descendent combinator.
If the class name were to change, we’d have to go and change each style that had that class name, which could take a while on a huge site.
With Sass, you can write nested styles, and the compiler will still write valid CSS for you! This makes it easy to add new styles for a specific point. This is based off the concept DRY (don’t repeat yourself).
Try not to overdo it with nesting. Only go 4 of 5 levels deep at most. Going deeper usually implies you need more classes and id’s in your markup.
Modernizr is a JS library that works well with Sass, which we’ll add to the page.
Modernizr adds a bunch of classes to your html tag, which allows you to dynamically determine what the browser can and cannot do. This is useful because it lets you write CSS based off that feature.
Here, if the browser supports css columns, this CSS will be applied and overwrite rules written above it.
Advanced Nesting
The parent selector feature is represented by an ampersand (&). Below, in the Sass we’ve added a rule with html.csscolumns & as the selector. As you can see in the CSS, this means that what’s written before the &, in this case html.csscolumns, will be put ahead of the other selectors, .blog .entry p, which are represented by the &, in the css. So, we end up with html.csscolumns blog .entry p
Now let’s say another h1 was added and we wanted to style just that.
As you can see, it affects all h1’s on the page, and we don’t want that. Normally we’d fix this by using the direct child combinator >. This is supported by sass as well.
You could clean it up further by combing the nesting with the styles below.
The & works with hover states and such as well. Think how much easier this is than having to write out a:hover, a:visited, a:link, etc.
Finally, by default Sass simulates nesting by indenting parts of you CSS, to give you an idea of how the original Sass looked.
Variables, Mixins, and Extending Selectors
Defining Variables
You’ll often use a color multiple times in a project. If you wanted to change it, you’d have to change it in all those locations you used it.
With Sass you can define variables and use them throughout your CSS. They must start with a dollar sign.
Here we have a site already put together with Sass, with some repeating colors.
To set up variables, write their name, then a colon, then the value, then a semicolon. Then, all you need to do is use that variable name when you need that value. Here, we’ve set up #333 as $primary_color.
This makes it easy to change this color later. You can change it in one place, the variable declaration, rather than having to change it each place you need it.
You can do this for margins as well, pretty much whatever you want. Notice how easy it makes it to change the styles.
You can actually take a variable and multiply its value, like they did for padding here. In this case the padding is now 7.5px.
You can also do just normal inline calculations without a variable. It accepts division, subtraction and addition as well.
We can make variables this way as well. Since we’re using pt units, it will convert them to px for you in the css.
If you try using ems though, you’ll get an message telling you where the error is.
Introducing Mixins
Here we have some code that’s getting repeated quite a bit for the border radii.
To add a mixin, start with @mixin, then the name of the mixin, then curly brackets, in which you put the code you want.
Then, to use a mixin, in the css rule write @include, then the name of the mixin you want to use, then end it with a semicolon like any other css declaration.
The final product:
You can even set up mixins with selectors. Note how Sass auto scoped it so that the a is nested within the .box class for us.
The Power of Mixins
You can pass arguments into mixins like you would a JS function. You do this by putting parentheses after the name of the mixin when declaring it, then popping in your arguments. So, now whenever this is included, roundy is expecting these two numbers (for #radius-one and #radius-two).
Since in this example radius-two seems to just be the double of radius-one, we can dry things up even further and only use one argument with a calculation.
Note that it the arguments you pass in don’t have to be just numbers, you can use other things like colors too.
Here’re the golden rules for mixins. Also, this color choice looks more pee than gold to me : O
Extending Selectors
Let’s say you need to copy some code, like for .bar here, to a new class called menu. In CSS you’d copy and paste like this.
Or, you could use a mixin like last lesson. But extend is a great directive to solve the same problem. You simply type @extend, then the name of the selector you want to extend, in this case .bar. You can see that in the CSS it basically merged the selectors together.
Issue that came up when they developed this: People wanted to use more semantic classes like .menu and .nav, based off of .bar, but they ended up with .bar appearing in their css without actually using it. So, they came up with placeholder selectors, which are represented by a % then a name.
Now, bar is a placeholder selector and doesn’t get printed to our css. The rule of thumb for using mixins vs extends is that mixins are great for arguments and advanced logic, like building a library, while extends are for smaller scale, simpler things where you just want to copy some stuff with no arguments or logic.
Kyle's Awesome Awful Websites 