Why Sass?

Sass is a Cascading Style Sheets (CSS) meta language. It is a scripting language that is interpreted into CSS. SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.

Variables
- Sass allows variables to be defined.
- Variables begin with a dollar sign ($).
- Variable assignment is done with a colon (:).
- SassScript supports four data types: Numbers, Strings, Colors, Booleans.

In CSS 
1
2
3
4
5
6
7
8
9
10

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}
In Sass 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Nesting
CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.

In CSS 
1
2
3
4
5
6
7
8
9
10
11
12
13

table.hl {
  margin: 2em 0;
}

table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}
In Sass 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Mixins
- CSS does not support mixins.
- Any repeated code must be repeated in each location.
- A mixin is a section of code that contains any valid Sass code.
- Whenever a mixin is called, the result of translating the mixin is inserted at the calling location.
- Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.

In CSS 
1
2
3
4
5
6
7
8

#data th {
  text-align: center;
  font-weight: bold;
}

#data td, #data th {
  padding: 2px;
}
In Sass 
1
2
3
4
5
6
7
8
9
10
11

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

Mixins also support arguments:

In CSS 
1
2
3
4

#data {
  float: left;
  margin-left: 10px;
}
In Sass 
1
2
3
4
5
6
7
8

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

In combination:

In CSS 
1
2
3
4
5
6
7
8
9
10
11
12
13

#data {
  float: left;
  margin-left: 10px;
}

#data th {
  text-align: center;
  font-weight: bold;
}

#data td, #data th {
  padding: 2px;
}
In Sass 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

For more information sass-lang.com