Variables

Variables are a way to reuse values across all your styles. This is handy for defining a color or font used all over your application.

Below is an example of sass variable definition and how to reference the variable.

$base_color: #000000

body
  color: $base_color

Same example in scss syntax:

$base_color: #000000;

body {
  color: $base_color;
}

Nesting

Nesting is a way to mimic how the Dom defines your elements and style nesting. This helps you override and provide base styles to child elements.

Example:

.header
  .title
    font-size: 2em

In sass there is a special character to tell the preprocessor to use the outer style prepended to the indented definition. The parent character is &.

Example:

.header
  &:hover
    font-size: 2.5em

  .title
    font-size: 2em

In the above example the hover will be translated into CSS as .header: hover. Nice little trick.

Extending

To extend another style its very simple. You just use the ‘@extend’ keyword with the style you want to extend / include onto your styles.

Example:

$base-font-color: #00000

.slimheader
  color: $base-font-color

.header
    @extend .slim header

Include

Including another file is like how you would include a file in CSS. You use the @include keyword. This helps you break up your files to make your styles more manageable. The order of the includes are important. If you define a variable in one and reference in another you’ll need to include the variable file first.

Example:

A file defining fonts, _fonts.sass, would containing:

$san-serif-font: 'Open Sans Condensed', sans-serif

$serif-font: 'Libre Baskerville', serif

Can be used in the main application file, application.sass, by using the include:

// include font partial
@import font

body
  font-family: $serif-font

As you can see from the above the file we are including is prefixed with a _, this indicates to the sass preprocessor that the file will be used as a partial. If you are familiar with handlebars or haml it is a similar concept.

Next: Conditions