Sass Quickstart

First things first – I use SCSS Syntax. Also, you need a compiler – I use NetBeans (Koala is also good). But these are for Windows users just like myself – I have no doubts that for Linux users, there are much more powerful solutions :-).

Directory structure

I’d say this is up to:

  1. personal preference
  2. project requirements
  3. … and few other things.

You can go with something like:

Partials

As you can see in the above structure, there are partials – this is the word you use for Sass files. It is a nice way to structure CSS, based on the layout, project type, etc.

Import

Use the @import clause for importing partials into the main (compiled) file. Normally you would put import clauses into the main style.scss file and the syntax would be something like the following:

Notice that you don’t need _ or .scss suffix.

Variables

Yes, these are the variables you see in other programming languages. In _base.scss partial, you can put something like:

And you would call it like:

But in _buttons.scss partial, you could also use the following, and without the need of redeclaring this variable:

But needless to say – if you want to reuse this variable across other partials, make sure you define it in _base.scss file (or whichever partial will be imported first), possibly on the top, before this variable has been used. As you know, in CSS, whatever comes last takes the precedence. And there is a quite big chance that your CSS file will not be compiled at all, as the compiler would return an error ( something like variable not declared or so).

Mixins and @include

Now Mixins is an excellent topic. Let the show you few mixins and notice that they use @include clause:

And this is how you would call it in our example:

But there is absolutely no reason why wouldn’t you use it again:

And you would get the following result:

I guess you are already asking – do I have to write all these mixins, or has someone already done this before? Sure they did it – and a lot of people did it! You can find an extensive list on this blog post, While you can find also some of them on my resources page.

Inheritance

Why bother with redeclaring the styles, when you can use an @extend clause. It would go like:

And the CSS result will be:

Nesting

If you use the following:

You would get: