Sass

Sass is a CSS pre-processor, so it saves time and generates well formatted CSS.

preprocessing

Sass compiles to CSS. Sass will watch the .scss file for changes and update the .css file.

$ sass --watch style.scss:style.css 
>>>Sass is watching for changes, press Ctrl-c to stop.

Variables

variables are scoped using the $ symbol.

$coloring:#888; 
$font-base:verdana, arial, sans-serif;  

.bam { 
  background:$coloring; 
  font:$font-base; 
} 

Functions

$dark-sky: darken($coloring, 10%);
$light-sky: lighten($coloring, 10%);

a { color:$coloring; text-decoration:none; 
        &:hover  { color:darken($coloring, 10%); } 
}

Partials

partials are code snippets, named with a leading underscore, e.g. _partial.scss

Import

Sass takes the file to import and combines it with the file to import into and then serves a single CSS file to the web browser, helping with performance by using only one HTTP request.

//import _reset.scss partial into base.scss
@import 'reset';

Mixins

@mixin directive allows you to include and reuse a block of rules, and supply and interpret arguments. Then use it as a CSS declaration starting with @include.

//first you define the mixin, here it is border-radius with vendor prefixes
@mixin border-radius($rad:9px) {  //pass in arguments sep by commas:optional default value
     -moz-border-radius: $rad;
  -webkit-border-radius: $rad;
      -ms-border-radius: $rad;
          border-radius: $rad;
}

//and now include the mixin
.box { background:#ddd; 
       @include border-radius(3px); }

Inheritance

inheritance lets you share a set of CSS properties from one selector to another.

.message { padding:0 10px; }

.success { 
  @extend .message; 
  background: violet; 
}