Sass

CSS "pre-processors" such as LESS, Sass and Compass compile a language into CSS.

CSS, which can be read by a browser, doesn't provide all the features we want as web developers, and thus programs were created to turn higher-level languages into CSS.

This creates a happy balance between developer tools and support in browsers; thus we get to code with some more tools in our toolbelt, and the browser still gets to just interpret CSS.

The (arguably) most popular of these CSS preprocessors is SCSS ("Sassy CSS"), which is a derivative of the original Sass language.

Rule #1: SCSS provides variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

Rule #2: SCSS lets you nest CSS declarations

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

      li { display: inline-block; }

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

However, sass-guidelin.es says, and I agree, that nesting is overly misused so avoid selector nesting as much as possible. The exceptions are:

When to nest

  1. psuedo-classes and pseudo-elements
  2. component-agnostic state classes such as .is-active
  3. When styling an element because it happens to be contained within another specific element.

Read sass-guidelin.es for more information.

Rule #3: partials and import

You can create SCSS files that have small, dedicated uses. For instance, imagine using one file to exclusively store font styles. This is a great way to modularize your CSS so this module can be reused in other projects.

A partial is simply a SCSS file named with a leading underscore. You might name it something like _partial.scss, and is imported into other files with the @import directive.

// _reset.scss

html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* base.scss */

@import 'reset';

body {
    font: 100% Helvetica, sans-serif;
    background-color: #efefef;
}

Rule #4: mixins and extensions

Mixins

Mixins exist to avoid repeating a lot of stuff.

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

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

The Bourbon and Neat libraries provide many of the mixins you will end up needing, but sometimes it is helpful to write your own.

Extensions

Extensions exist to create subclasses of classes, etc.

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}