Sass, or Syntactically Awesome StyleSheets. You may have heard about Sass or Less before. They are both extensions of CSS that add power and organization to stylesheets. Anything that you write in Sass get’s compiled to perfectly valid CSS.
Sass code comes in two flavors, an older -just- “Sass” that uses indentation and no curly braces, and the newer, more awesome SCSS (Sassy CSS). Today, we’ll be taking a look at the latter.
But first and foremost, why should you care?
Well, CSS has a problem. It’s powerful, but it lacks elegance. It lacks structure, or at least, and easy way to create this structure. Big projects have HUGE stylesheets, and they go over so many iterations, that they end up having repeated selectors, ugly overrides and everything and anything can become a nightmare when trying to find one little line of code. With Sass, we can overcome some of that. And once you get used to it, you’ll be faster and better at writing correct and organized CSS. And more importantly, it will make your CSS easier to maintain.
Sass used to be hard to get into, since the syntax felt alien to your everyday CSS maniac -me-, but now, SCSS makes it easier and more intuitive than ever. Here’s a few things that will make you fall in love with it:
Nesting
You can nest selectors inside other selectors! Selectorception!
div {
background-color: red;
.blue {
border: 1px solid blue;
}
}
That code get’s compiled into:
div {
background-color: red;
}
div .blue {
border: 1px solid blue;
}
Awesome right? We can also use the ampersand (&) character to make the nested element into a subselection:
button {
background-color: red;
&.rounded {
border-radius: 3px;
}
&:hover {
background-color: blue;
}
}
The code above will compile into:
button {
background-color: red;
}
button.rounded {
border-radius: 3px;
}
button:hover {
background-color: blue;
}
This feature is incredibly powerful once we get a bit complex, it’s a lifesaver.
Variables
Variables in CSS, is the world coming to an end? IT IS. Just kidding. Making use of Sass variables, we can do useful things such as creating a color palette for our website.
Imagine that we code this awesome site. And it has colors, and stuffs. And we love it, and it’s amazing. But one day, you wake up, and hate that shade of green that you chose for half of the site, and you start finding and replacing every instance of that god awful monstrosity of a color. If onlywe had created a variable and used it all over the stylesheet, changing it only once would suffice… Now we can:
$terrible-ugly-green: #abcca3;
.cool-button {
background-color: $terrible-ugly-green;
}
div.awesome-div {
border: 1px solid $terrible-ugly-green;
}
footer.best-footer-ever {
color: $terrible-ugly-green;
}
Compiled code:
.cool-button {
background-color: #abcca3;
}
div.awesome-div {
border: 1px solid #abcca3;
}
footer.best-footer-ever {
color: #abcca3;
}
This variables can hold font families, colors and anything that you can think off (not horses though. Absolutely not).
Partials and Import
Sass let’s you split your code into partials and then import them into your main stylesheet. Although CSS does indeed provide an import function, it creates an additional HTTP request. Sass will simply bring in the while file and “paste” it inside the main stylesheet as it get’s compiled. This is the Sass feature that, if used correctly, will make your CSS modular and easy to maintain.
Partials are created as separate files with a preceding underscore and .scss extension (e.g.: _color-palette.scss), then, we can import it into the main stylesheet using @import like shown below:
$my-green: #bbf144; $my-blue: #4682b4; $my-pink: #fd00ff; $my-brown: #8b4513;
@import 'color-palette';
body {
background-color: $my-brown;
}
Mixins
Mixins are simply awesome (and underused). They let you create groups of CSS declarations and reuse them as much as you want. When used in conjunction with variables, they are incredibly powerful:
@mixin rotate($x, $y) {
-webkit-transform: scale($x, $y);
-moz-transform: scale($x, $y);
transform: scale($x, $y);
}
div.mydiv {
@include rotate(2, 2);
}
Compiled:
div.mydiv {
-webkit-transform: scale(2, 2);
-moz-transform: scale(2, 2);
transform: scale(2, 2);
}
Extension/Inheritance
You can also use @extend to share CSS properties among selectors:
.pop-up {
position: absolute;
top: 200px;
right: 10px;
background-color: white;
border: 1px solid black;
}
.important {
@extend .pop-up;
background-color: red;
}
Compiled:
.pop-up, .important {
position: absolute;
top: 200px;
right: 10px;
background-color: white;
border: 1px solid black;
}
.important {
background-color: red;
}
That’s just the beginning, when you get used to it, you’ll notice how much of a difference it makes, trust me on this. If you want to check out, stay tuned for the FCC Zipline Series posts, where I’ll be using it quite heavily.
If you want to get a quick feel for Sass, using Brackets is your man. You can use the Extension Manager to install the Brackets SASS package in mere seconds!
StartJS 