What

'Syntactically Awesome Stylesheets'

Pre-process your CSS

Use to power of SASS to generate your CSS

Tech

Ruby & SASS = SCSS (Sassy CSS)

Why

Variables

Gone are the days of 'find' & 'replace'

// What handy variables your are
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

.container {
   background-color: $primary-color;
}

Nesting

Visually write your CSS in a hierarchical manner

SCSS Input

// What nice children I have
nav {
  ul {
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    text-decoration: none;
  }
}

CSS Output

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

nav li {
  display: inline-block;
}

nav a {
  display: block;
  text-decoration: none;
}

Import Partials

Organise your CSS into a maintainable structure

/* _reset.scss */

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

/* base.scss */

@import 'reset';

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

Mixins

Create reusable components to writer smarter CSS

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

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

Inheritance

Use your programmer brain to create Object orientented CSS

.button {
  transition: all 0.25s ease-in;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  border: 1px solid #ccc;
  padding: 10px;
  background-color: gray;
  color: black;
}

.orange-button {
  @extend .button;
  background-color: orange;
  color: white;
}