Introduction
Sass is a CSS preprocessor that lets you create stylesheets in a much more efficient and intelligent manner than using simple flat CSS. It provides a number of dynamic components that will make your code smaller, more reusable and more scalable. Its syntax is fairly easy to understand and rather adds on top of regular CSS than replaces it.
In this tutorial, we will see how you can install Sass and get started using it. For this, it assumes you are already running your own VPS with Ubuntu and a web server installed on it if you want to see something in the browser (but not necessary at this level).
Please note though that you can install Sass also on other operating systems like Windows and OS X.
You can check out this article for getting you up and running with your VPS.
Installing Sass
In order to install Sass, we’ll need to first have Ruby on the system, so we’ll have to get that installed first. In addition, we’ll have to install rubygems (the package management system for Ruby). Let’s do both of these tasks with the following commands:
sudo apt-get update sudo apt-get install ruby-full rubygems
Next up, we can use the gem command to install Sass:
sudo gem install sass
Now that Sass is installed, we can get started.
Using Sass
Let’s create a stylesheet to play with. Navigate to your web server’s root folder (for Apache it should be /var/www) and create a file called style.scss:
cd /var/www nano style.scss
Inside this file, paste in the following css rule:
.box {
padding:20px;
background-color:red;
}As you can see, this is some basic css. Save the file and exit. Now, we’ll need to tell Sass to translate this file into a regular css format file (ending with the .css extension):
sass --watch style.scss:style.css
With this command, Sass will generate the .css file and watch over the .scss file for any changes. If they occur, the .css file will get automatically updated.
When running this command for the first time, you get this error:
[Listen warning]:
Missing dependency 'rb-inotify' (version '~> 0.9')!
Please run the following to satisfy the dependency:
gem install --version '~> 0.9' rb-inotify
You can run the following command to satisfy the dependency:
gem install --version '~> 0.9' rb-inotify
This will do trick. Now, if you are dealing with multiple Sass files, you can run the --watch command and make it compile an entire folder of .scss files:
sass --watch stylesheets/sass:stylesheets/css
This will make it keep track of all the .scss files in the stylesheets/sass folder, automatically compiling them and turn them into their equivalent in the stylesheets/css folder. Once you run one of these commands though, Sass will be in this "watch mode" until you tell it to stop.
You can press Ctrl+C to make it stop watching over the files. After that, changes you make to the .scss file(s) will not be automatically reflected in the .css file(s) until you run again the --watch command.
So what’s the deal? All we did was write some css into a file and then have it copied into another. But there is more to Sass and this is why you should use it. So let’s see what else you can do.
Nesting
Nesting is a great way to avoid having to write the same selector over and over. Say for instance you have 3 selectors that begin with the same thing: ".box ul", ".box li" and ".box li a". Normally, you’d have to create three different rules for these:
.box ul {
...
}
.box li {
...
}
.box li a {
...
}But with Sass, you can nest them like so:
.box {
padding:20px;
background-color:red;
ul {
margin:10px;
}
li {
float:left;
a {
color:#eee;
}
}
}As you can see, this way you avoided having to repeat writing the .box part of the selector all 3 times. Additionally, it looks very simple and logical. Now if you use the --watch command to generate the .css equivalent, it will automatically create all 3 of those css blocks for you:
.box {
padding: 20px;
background-color: red;
}
.box ul {
margin: 10px;
}
.box li {
float: left;
}
.box li a {
color: #eee;
}In addition, you can nest proprieties using the same logic. For instance, you can write something like this:
.box {
padding: {
top:20px;
right:10px;
bottom:15px;
left:10px;
}
}This saves you the time of having to write 4 times the word "padding".
Variables
Another time saving and simply awesome feature of Sass is the use of variables. Similar to programming languages like PHP or javascript, this allows you to declare a variable once and use it later in your code as many times as you want. For instance you can do something like this:
$color: #eee;
a {
color: $color;
}Sass will then replace all instances of the $color variable in the entire file with the actual color code you declared once: #eee.
Mixins
These are probably the most powerful Sass feature and they behave basically like functions. You can reuse entire style declarations and even pass them arguments. Similar to a function, first you declare them. So let’s declare 2 slightly different mixins.
@mixin box-size {
width:200px;
height:200px;
padding:10px;
margin:0px;
}
@mixin border($width) {
border: $width solid #eee;
}As you can see, the first one does not take any arguments. We can make use of it like so:
.box {
@include box-size;
}This will output the following css:
.box {
width:200px;
height:200px;
padding:10px;
margin:0px;
}The second mixin we can use by passing it an argument:
.box2 {
@include border(1px);
}This will use the rule defined in the mixin and pass it the size argument for even bigger flexibility. This will output the following css:
.box2 {
border: 1px solid #eee;
}These are some but not all of the features that make Sass awesome. You can make various computations on a number of possible values and other awesome things. To find out more information and examples of how to use it, you can check out the Sass website.
Output style
Running the --watch command we saw above will make Sass output the resulting CSS in the .css file in its default way: nested. There are 4 different types of output style you can choose from:
- Nested: reflects the structure of the CSS styles and the HTML document they’re styling.
- Expanded: with each property and rule taking up one line
- Compact: each CSS rule takes up only one line, with every property defined on that line.
- Compressed: has no whitespace except that necessary to separate selectors and a newline at the end of the file.
You can read more about these different styles here. But an easy way to switch between them is in the --watch command itself by adding a flag at the end. For instance, if we want to use the expanded style, we run the command like this:
sass --watch style.scss:style.css --style=expanded
Conclusion
Sass is very powerful and once you get used to it, you will have a much easier front-end experience. It adds intelligence to the way CSS is thought of and provides tools to make it work more efficient.