develop with


Sass has the ability to define variables, include files and extend other styles.


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

  color: $base_color

Same example in scss syntax:

$base_color: #000000;

body {
  color: $base_color;


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.


    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 &.


    font-size: 2.5em

    font-size: 2em

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


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


$base-font-color: #00000

  color: $base-font-color

    @extend .slim header


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.


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

  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

comments powered by Disqus

Want to see a topic covered? create a suggestion

Get more developer references and books in the developwith store.

Sass Language
Sass Reference list
List of how tos for Sass