Skip to content

Sass for beginners

What makes Sass/SCSS so awesome?

Well, if you have been using CSS for years, you probably miss some functionalities that would make your stylesheets more inteligent. Sass came to add these new improvements to CSS.

The meaning of the acronym S.A.S.S. is: “Syntactically Awesome Style Sheets”. The name is so awesome as the idea behind Sass. If you don’t know nothing about Sass, this article is for you. Lets keep it basic and after I will write a second part of this article showing how can you improve your Sass Stylesheets and use it with other tools that will make your app more smart and efficient. Sass is a scripting language that can use operators, compute expressions, use variables, functions, conditionals and loops.

The original syntax of Sass is very different from normal CSS, what made some people shake their legs and turn their faces to it. Some years after they came with the idea to make it more syntax-like CSS. This is called SCSS. In this article we will just write SCSS.

If you are interested to know more about it, in the end of the article I link further reading about Sass.

Installation

You will need Ruby installed in your system.

Linux

If you have Linux you can hit the Command and get it like that:

sudo su -c "gem install sass"

Windows

If you use Windows, there is a Ruby installer that will do all the work for you and + install a Ruby command line powershell application so you can run your code.

Mac

If you use Mac you dont need to Install Ruby before. Mac already comes with Ruby .

Now you can install it

Hit your terminal/Command/cmd and enter:

gem install sass

If you receive some error message, try with sudo:

sudo gem install sass

You can check if is working with:

sass -v

This should print the version of Sass you installed. Congratulations, you are one step closer to the illumination

Lets learn the basics now

Create a file called myFirstSass.scss, and lets start.

Compiling to CSS

Everything you do with Sass is compiled (transformed) into normal CSS which is linked to your HTML page as usual. To compile to CSS, you just need to type in your terminal:

sass myFirstSass.scss myFirstSass.css

Or you can just simply start a watcher that will compile to CSS everytime you save changes in your SCSS file:

sass --watch myFirstSass.scss:myFirstSass.css

Important to say that the SCSS file doesn’t need to have the same name of your CSS.

Variables

With variables you can change all your CSS systematically. Variables in SASS always start with $. If you are not a programer and don’t know what a variable is, the variable is a “name” where you can store a value on it. See the example below:

// - - - - - VARIABLES - - - - - //
// Create a variable with $

$primary-color: tomato;

// Use your newborn variable
h1 {
color: $primary-color;
}
a {
color: $primary-color;
text-decoration: none;
}

this will compile to:

h1 {

color: tomato;

}

a {

color: tomato;

text-decoration: none;

}

view rawmyFirstSass-output1.css hosted with ❤ by GitHub

So as you can see, you can mix the variables with your old way to write CSS with no problems.

Nesting selectors and the “&” selector

You can save some time also nesting selectors. The & references the parent selector:

// – – – – – NESTING SELECTORS – – – – – //

a {

text-decoration: none;

.top {

font-size:14px;

}

&:hover {

text-decoration: underline;

}

nav & {

color: #2196F3;

}

}

view rawnesting-selectors.scss hosted with ❤ by GitHub

this will compile to:

a {

text-decoration: none;

}

a .top {

font-size: 14px;

}

a:hover {

text-decoration: underline;

}

nav a {

color: #2196F3;

}

view rawmyFirstSass-output2.css hosted with ❤ by GitHub

Partials and Import

You can use chunks of other .scss files to have more modularity. I can import a reset file to my scss without the need to write this reset always when I write a code. The partials in Sass always shall be written preceding by “_”. Example: “_reset.scss”:

* {

margin: 0;

padding: 0;

border: 0;

}

view raw_reset.scss hosted with ❤ by GitHub

Now to import this partial to our SCSS is very easy:

@import ‘_reset’;

// The rest of your code goes here

view rawimporting-partial.scss hosted with ❤ by GitHub

You dont need to write “.scss” when you import. Now save your code and see your compiled CSS with the reset imported.

Extending from other selectors

You can easily use properties from other selectors with “@extend”:

.black-dog {

background-color: #333;

}

.black-cat {

@extend .black-dog;

width:20px;

}

view rawextend-example.scss hosted with ❤ by GitHub

This will output:

.black-dog, .black-cat {

background-color: #333;

}

.black-cat {

width: 20px;

}

view rawextend-output.css hosted with ❤ by GitHub

Mixins and Includes

Mixins are like functions. You can set a name for your @mixin and pass any value in the parameter. This can save you time to write vendor prefixes or to apply the variables you have already set in your project. The @include will be responsible to insert this @mixin where you want:

@mixin transform-rotate($rotateValue) {

-webkit-transform: rotate($rotateValue); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */

-ms-transform: rotate($rotateValue); /* IE 9 */

transform: rotate($rotateValue); /* IE 10, Fx 16+, Op 12.1+ */

}

.green-dog {

@include transform-rotate(30deg);

}

view rawmixin-include.scss hosted with ❤ by GitHub

This will output:

.green-dog {

-webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */

-ms-transform: rotate(30deg); /* IE 9 */

transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */

}

view rawmixin-include-output.css hosted with ❤ by GitHub

Using operators

Sass makes possible to set properties and values based on calculations. You can add, subtract, divide, multiply and etc.

Lets make a box float in the middle of the screen using this magic:

That’s actually nothing!

You can use your creativity and make smarter and modular Stylesheets. Hope you like folks.

For any question, you can be free to comment and also participate in this article.

Further reading:

Sass official website: http://sass-lang.com/

And this A list apart article