Starting with Sass

gistfile1.md

Getting started with Sass is really easy if you understand CSS, there are a small amount of changes you need to make in order understand the basics of Sass.

Using nesting

Using nesting makes writing CSS/Sass so much easier, once you get use to it, you will begin to write it naturally, the basic principle of Sass nesting is to cut down on how much you write and maintain clean, easy to read stylesheets.

A generic CSS will contain multiple class declarations which can take up a number of lines in your file; your basic CSS file may look something like this:

.wrapper {
  border: 0;
  padding: 0;
  margin: 0;
  background: #eee;
}

.wrapper ul {
  margin: 0;
  padding: 0;
}

.wrapper ul li {
  list-style-type: none;
  float: left;
  display: inline-block;
  font-size: 12px;
}

You will notice that you keep having to declare the same class (.wrapper) with a selector after it, in Sass, this is made much easier, instead you write:

.wrapper {
  border: 0;
  padding: 0;
  margin: 0;
  background: #eee;
  
  ul {
    margin: 0;
    padding: 0;
    
    li {
      list-style-type: none;
      float: left;
      display: inline-block;
      font-size: 12px;
    }  
  }
}

Notice how much simpler the syntax is within Sass, all li and ul selectors are declared within the class itself, so no more need to keep doing .this .that .this .that!

##Using Variables## Variables are really easy to understand, if you have ever written Javascript, you will understand that they can represet a number (int), text (string) or data (array), this applies in Sass too, you can set the variable $colorA and give it a value of #000 which is black. Having the option to set variables means that you can replace #000 in your stylesheet with $colorA and then change a single value which is updated throughout your file. An example of this is:

$background: #000;

.wrapper {
  color: $background;
  border: 1px solid $background;
  
  .block {
    border: 0;
    padding: 0;
    color: $background;
  }
}

Thats it! Now, if we decide that the font colour and block colour should be red, instead of changing lots of values, we just change the top $background variable to red, like so:

$background: red;

.wrapper {
  color: $background;
  border: 1px solid $background;
  
  .block {
    border: 0;
    padding: 0;
    color: $background;
  }
}

You can set as many variables as you want and use then throughout your stylesheet and update them whenever you need. If you ever needed multiple versions of a single CSS file with different colours, you can have a seperate file containing all of your variables and call it into the stylesheet using @import (without the .sass on the end) like so:

@include 'colours';

.wrapper {
  color: $background;
  border: 1px solid $background;
  
  .block {
    border: 0;
    padding: 0;
    color: $background;
  }
}

colours.sass

  $background: red;
  $font: 'Helvetica', sans-serif;