Table of Contents
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/
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
