Sass

Sass is a preprocessor that helps you to write style in scripting language that is interpreted into CSS.

Please find the full documentation here.

Variables

Sass uses the $ symbol to make something a variable.

$font-family: Helvetica, sans-serif;
$brand-color: #333;

body {
  font-family: $font-family;
  color: $brand-color;
}

This code will produce the following CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Will generate the following CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Will generate:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Breakpoints

In the overrides.scss file have been defined the following breakpoints that can be used when you need to specify a different style for Tablet, Desktop and Wide (Mobile is the default one).

$tablet:  "#{$screen} and (min-width: #{$screen-sm-min})" !default;
$normal:  "#{$screen} and (min-width: #{$screen-md-min})";
$wide:    "#{$screen} and (min-width: #{$screen-lg-min})";

This breakpoints can be used as per the following example:

h1 {
  color: #333;
  @media #{$tablet} {
    color: #444;
  }
  @media #{$normal} {
    color: #555;
  }
  @media #{$wide} {
    color: #666;
  }
}

Bootstrap grid

Here an example for using the bootstrap grid in Sass:

.my-container{
    @include make-row();
    .my-container-children{
        @include make-xs-column(12);
        @include make-sm-column(6);
    }
}

@todo

• Gulp stuff
• Commenting standards
• Mobile first
• Browser support