Wait A Minute...

SASS vs SCSS

Show it to me

CSS

.container .interesting-element {
    padding: 1em;
}

.container .interesting-element p {
    color: red;
}

.container .interesting-element span {
    text-decoration: underline;
}

SCSS

.container .interesting-element {
    padding: 1em;
    p {
        color: red;
    }
    span {
        text-decoration: underline;
    }
}

CSS

a {
    color: #fc3;
}

nav {
    background-color: #fc3;
}

SCSS

$brand-color: #fc3;
a {
    color: $brand-color;
}
nav {
    background-color: $brand-color;
}

Whoa That's Snazzy

Mixins

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

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

Generated CSS

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

Imports

// _reset.scss
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* base.scss */
@import 'reset';

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

CSS

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

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

Partials

Inheritance/Extend

.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;
}

Math Operators

.container { width: 100%; }

article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
    float: right;
    width: 300px / 960px * 100%;
}

How do I use it Today?

Pitfalls