Sass For Beginners

Install Sass

Sass code cannot be read and processed by browsers it has to be compiled first into regular CSS so there are a couple of things to install. For those using Windows or Linux you need to install Ruby which you can find here Rubyinstaller.org. If you are a MAC OS X user RubyGems is already pre-installed. Then you also need RubyGems and for that open up your Command Prompt Ruby(which was installed with Ruby) and type gem install rubygems-update and press enter. You can know type gem -v to make sure it is intalled. If it’s there it will display the version of RubyGems you have. To install Sass it’s very easy. Always on your Command Prompt Ruby, type the following line of code and wait until the installation is complete.

gem install sass

Now type sass -v to make sure it has been installed properly.

Sass Up And Running

Now everything is installed you need to create a Sass file which will have a .scss extension such as style.scss. Then in your Ruby Command Prompt go to the directory where you created your Sass file and type the following.

sass --watch style.scss:style.css

Instead of --watch you can also type --w.

What this does is that it tells Sass to keep an eye on style.scss file so every time you save your changes made in it Sass will compile the code into regular CSS inside the style.css document (if the style.css does not exist Sass will create it automatically). Now you can leave the Command Prompt on the side (don’t close it) and start coding in your Sass file.

We are now ready for some coding.

Different Ways To Output Your CSS

There are different styles in which you can get your CSS. The way we just saw before…

sass --watch style.scss:style.css

…is the default in Sass and will output you CSS like this:

#box {
    background: #cccccc;
    margin: 0 auto;
    padding: 15px 10px; }

p {
    font-size: 0.9em;
    line-height: 10px; }

There are three other styles. The first one we are going to see is expanded style. It outputs your CSS for easy reading.

sass --watch style.scss:style.css --style expanded

#box {
    background: #cccccc;
    margin: 0 auto;
    padding: 15px 10px;
}

p {
    font-size: 0.9em;
    line-height: 10px;
}

Now let’s see the compact style. This one places each selector and its properties in one line.

sass --watch style.scss:style.css --style compact

#box { background: #cccccc; margin: 0 auto; padding: 15px 10px; }

p { font-size: 0.9em; line-height: 10px; }

And the last one is compressed style which will output everything in one line and get rid of comments and unnecessary white spaces and semi-colons and also shorten some values like colours. It will give you a minified version of your CSS.

sass --watch style.scss:style.css --style compressed

#box{background:#ccc;margin:0 auto;padding:15px 10px}p{font-size:0.9em;line-height:10px}

Comments In Sass

There are two different ways to write comments in Sass using // or /* */.

// This comment is for Sass only, it will be ignored when compiling

/* This comment will be compiled and visible in your CSS file */

Using Variables

If you are familiar with programming you should know that a variable allows you store a value. To declare a variable in Sass, type the $ sign followed by any name you want. Now let’s say that you want to use this colour value #929292 for a border, for your menu and in the background of your footer, instead of copying the colour value in three different places in you CSS, assign the value to a variable and copy it wherever you need this colour. If one day you decide to change that colour you will just need to change it in one place. This works with any value usually used in CSS. What you can also do is adding or subtracting a value from another one, see the example.

$grey: #929292;
$marg: 10px;

.content {
    border: 1px solid $grey;
    margin: $marg;
}

a {
    color: $grey;
    margin: $marg $marg + 5px;
}

#footer {
    background: $grey;
    margin-top: $marg - 5px;
}

.content {
    border: 1px solid #929292;
    margin: 10px;
}

a {
    color: #929292;
    margin: 10px 15px;
}

#footer {
    background: #929292;
    margin-top: 5px;
}

Nesting In Sass

Nesting is one of the features that make your code much more readable and well structured. Let’s say that in your CSS you have the following selectors #box p and #box p a. The problem is that you have to rewrite the same beginning and that is where Sass can be used to avoid this.

#box {
    background: #000;
    margin: 15px;

    p {
    	background: #E8E8E8;
    	margin: 10px;

    	a {
    	    color: #3A4684;
    	}
    }
}

#box {
    background: #000;
    margin: 15px;
}

#box p {
    background: #E8E8E8;
    margin: 10px;
}

#box p a {
    color: #3A4684;
}

Using Mixins

Mixins can be compared to variables but instead of storing a value we will use them to store chucks of CSS code then call them anywhere and as many times as you need. This will be very helpful when you need to re-write the same code but with slight differences. For example if we want to apply a shadow to an element, first we need to consider cross-browser compatibility which is done by using -webkit-box-shadow, -moz-box-shadow and box-shadow. This means every time you want to add a shadow to an element you need to write three lines of code, well not any more with Sass. The other great thing is that you can also parse arguments. This is how to declare a mixin: @mixin anyname. Then you call the mixin like this: @include anyname;. See my example.

@mixin shadow($blur, $color: #000){
          box-shadow: 3px 3px $blur 6px $color;
     -moz-box-shadow: 3px 3px $blur 6px $color;
  -webkit-box-shadow: 3px 3px $blur 6px $color;
}

#box {
    width: 100%;
    @include shadow(5px, #ccc);
}

.container {
    @include shadow(10px);
}

#box {
    width: 100%;
            box-shadow: 3px 3px 5px 6px #cccccc;
       -moz-box-shadow: 3px 3px 5px 6px #cccccc;
    -webkit-box-shadow: 3px 3px 5px 6px #cccccc;
}

.container {
            box-shadow: 3px 3px 10px 6px black;
       -moz-box-shadow: 3px 3px 10px 6px black;
    -webkit-box-shadow: 3px 3px 10px 6px black;
}

I declared a mixin called “shadow” with two arguments. The argument $color has a default value whichwill be applied if no other colour value is parsed.

Using Inheritance

With Sass you can allow a selector to inherit all the properties from another selector by using the keyword @extend followed by the name of the selector from which it is inheriting.

.menu {
    margin: 10px 15px;
    width: 100%;
}

#box {
	//inheritance from .menu
    @extend .menu;
	//we can add extra properties
    background: #cccccc;
    padding: 5px 10px;
}

.menu, #box {
    margin: 10px 15px;
    width: 100%;
}

#box {
    background: #cccccc;
    padding: 5px 10px;
}

I hope this tutorial will help you to have a good understanding of how Sass works. Please if you liked it share it.