Learn Sass in 20 minutes

If you never approached any preprocessor, don’t worry i will explain what they are and how they work. There are many CSS preprocessors you can use. For example Sass, Stylus or LESS. Even they might differ from each other in syntax, they all share common philosophy – DRY – Don’t Repeat Yourself. Their goal is to help you by making your workflow easier and more managable. My favorite one is Sass. As you might saw, I used it in tutorial examples on Codepen. This is also the reason why I chose to write a tutorial on Sass as first (LESS and Stylus will follow). I hope that it will help you get your job done faster, with less stress and more fun.

Preprocessors are tools compiling your CSS code in a processed language to the pure and plain CSS syntax we’re all used to. They have their our syntax and style of writing code. They are not supported by browsers so don’t try to include them as your style sheets. After you finish your work, you still need to compile them into the CSS. Maybe, this will change someday (I hope so). They work mainly through command line, but some software is also available for you so if you are not big friend with command line it will not be a problem. Some of these programs runs only on Mac and other on PC’s, couple of them or also available to use online. Take a look at them and choose the one you like, however I recommend you – for your future work as Web Designer or Developer – to brush your skills and became more familiar with command line. It is not that hard. For Sass, you will need only one command on daily basis:

sass --watch scss:css

Yes, that’s all. This command says Sass preprocessor to watch your scss folder for any changes you make to files inside and then to write them immediatelly into files in CSS folder (you can chose whatever folder names you like – sass –watch sass:styles). Sass will always compile the code into CSS file with same name. If this file exist, Sass wil rewrite it every time. If it does not exist, Sass will created (in our CSS folder). After you install the Sass preprocessor (through command line) this command is the only one you will need. Maybe this one for checking Sass version:

sass -v

Simply said, preprocessors save our time and do a lot of the ugly work we don’t like. We can use them for things like nesting our selectors, creating variables for later use, math functions, referencing a parent selector or even reporting errors by telling us where and why there are errors in our code. After short intro, let’s take a look at some of the Sass features. One more thing … Sass has two syntaxes and two file types. The older one – Sass – which use .sass files, and the newer – SCSS – which use .scss files (I use SCSS). The biggest difference between is that the older (Sass, .sass) don’t use curly brackets to define block of properties and values and don’t use colons.

Example of Sass:

.wrapper
 margin: 0 auto
 width: 100%
 max-width: 1200px
 color: #eee;

Example of SCSS:

$lightgrey: #eee; /* This is a variable */
.wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1200px;
 color: $lightgrey;
}

As you can see, SCSS (newer syntax) looks more similar to CSS than Sass. I will focus on SCSS, but what syntax will you use in the future depends on you.

Installing Sass

If you are using Mac, you already have Ruby so you can open your command line and type command for Mac. For PC, first you need to get Ruby. The official page for downloading Ruby installer is at the bottom of this article. After installing Ruby you will open your command line and type:

PC:

gem install sass

MAC:

sudo gem install sass

And that’s all. Now you can use your command line to translate your sass (older) or scss (newer) codes into css by typing:

sass --watch scss:css

Variables

You can think of variables as some kind of a storage. It stores information for you so you can access them via their names later. You can use variables to store things like colors, font definitions, number values or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make create a variable. If you are familiar with PHP, than using the dollar sign will be natural to you.

Example in SCSS:

/*Our variables*/
$font: Helvetica, 'Open Sans', sans-serif;
$red: #a00;
$radius: 5px;

button {
 color: $red;
 border-radius: $radius;
 font: 100% $font;
}

After processing Sass and creating CSS (via command line or program of your choice) all of the variables will be simply replaced by the values. The final CSS code will look like this:

button {
 color: #a00;
 border-radius: 5px;
 font: 100% Helvetica, 'Open Sans', sans-serif;
}

Nesting selectors

If you are familiar with HTML (which you already should), you’ve probably noticed its nested hierarchy. Elements are nested inside each other, from parent to child. CSS has no clue about this feature. Through Sass you can nest your CSS selectors in the same way as you do it with your HTML code and create clean visual hierarchy of selectors and their rules. This feature comes very handy for managing :hover, :focus, :active and other states. To nest these states you write it inside the selector and replace the selector before colon with & symbol.

Example in SCSS:

ul {
 display: flex;
 justify-content: flex-end;
 list-style: none;
 li {
 a {
 display: block;
 color: #000; /*black*/
 text-decoration: none;
 &:hover {color: #ddd;}
 &:active {color: #aaa;}
 }
 }
}

CSS:

ul {
 display: flex;
 justify-content: flex-end;
 list-style: none;
}
ul li a {
 display: block;
 color: #000; /*black*/
 text-decoration: none;
}
ul li a:hover {color: #ddd;}
ul li a:active {color: #aaa;}

Placeholder selectors

Placeholder selectors are similar to variables, but they allow you to store whole CSS declarations (blocks of code). They begin with the % symbol. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output. After defining your placeholder (with % symbol) you can use them via @extend %placeholder-name; command.

Example in SCSS:

%link {
 display: block;
 color: #000;
 text-decoration: none;
}

a {@extend %link;}

CSS:

a {
 display: block;
 color: #000;
 text-decoration: none;
}

Mixins

A mixin looks like placeholder selectors discussed earlier, but they have one advantage. They let you store CSS declarations with ability to pass in value (parameter). This makes them much more flexible. They start with ‘@mixin’ followed by the name of mixin (your specify it). After defining them, you can use it with ‘@include name-of-mixin’. Pay attention! Don’t include ‘@mixin’ while using them, only write ‘@include’ and the name of mixin. You can use mixins very well to take care about properties that need to include vendor prefixes.

Example in SCSS:

@mixin border-radius($number) {
 -webkit-border-radius: $number;
 -moz-border-radius: $number;
 -ms-border-radius: $number;
 border-radius: $number;
}
button {
 @include border-radius(5px);
}

CSS:

button {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
}

Extending

With extend you can share a group or set of CSS properties between selector across your code. As said above … It is all about DRY philosophy. So why repeat yourself?. To use them you simply write ‘@extend’ following the class name of a group of rules you want to re-use.

Example in SCSS:

.button {
 width: 3em;
 height: 3em;
 color: #fff;
 border-radius: 5px;
}
.one {
 @extend .button;
 background: #a00;
 border-bottom: 5px solid #c00;
}
.two {
 @extend .button;
 background: #3498db;
 border-bottom: 5px solid #2980b9;
}

CSS:

.button, .one, .two {
 width: 3em;
 height: 3em;
 color: #fff;
 border-radius: 5px;
}
.one {
 background: #a00;
 border-bottom: 5px solid #c00;
}
.two {
 background: #3498db;
 border-bottom: 5px solid #2980b9;
}

Math

Yes! With Sass, hours of math classes you have to suffer in school now becomes useful. You can use mathematical signs – +, -, *, / and % – you are used to from life or programming and let Sass do all the calcutations for you.

Example in SCSS:

.wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 960px;
}
.row-1 {
 float: left;
 marign-left: 0;
 width: 450px / 960px * 100%;
}
.row-2 {
 float: right;
 margin-right: 0;
 width: 450px / 960px *100%;
}

CSS:

.wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 960px;
}
.row-1 {
 float: left;
 marign-left: 0;
 width: 46.875%;
}
.row-2 {
 float: right;
 margin-right: 0;
 width: 46.875%;
}

Summary

Today we discussed the most useful features of Sass you will use in your everyday life/work. Still, there are couple of things like imports and partials etc. that left untouched. I didn’t mentioned those because if you are just starting out, you already have a lot to learn and understand and I don’t want to overwhelm you. You know the old saying: “How to eat elephant? Piece by piece.” Take your time and don’t rush things up. I hope you enjoyed this introduction into Sass and if you have any question, contact me on deveroalex@gmail.com or twitter @alexdevero.

More:

http://www.rubyinstaller.org/
http://sass-lang.com/
http://livereload.com/
http://mhs.github.io/scout-app/
http://incident57.com/codekit/

Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail. I would love to hear from you.

Did you like this article? Please subscribe.

Are you on social media? Let's connect! You can find me on Twitter, GitHub and Dribbble.

Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.