It's unexpresive

CSS

    body {
        background: #F0F0F0;
        font-family: 'Open Sans', helvetica, sans-serif;
    }
    input[type=submit] {
        background: #333;
        border: 1px solid #E6C2A1;
        color: #F0F0F0;
    }
    footer {
        background: #332d29;
        color: #666;
    }

I get it now!

SCSS

    /* COLORS DEFINITIONS */
    $smoke: #F0F0F0;
    $lightBrow: #E6C2A1;
    $darkBrown: #332d29;
    $grey: #666;
    $dark: #333;
    
    /* FONT DEFINITIONS */
    $baseFontFamily: 'Open Sans', helvetica, sans-serif;
    
    body {
        background: $white;
        font-family: $baseFontFamily;
    }
    input[type=submit] {
        background: $dark;
        border: 1px solid $lightBrown;
        color: $smoke;
    }
    footer {
        background: $darkBrown;
        color: $grey;
    }

We have variables now.

It's so wordy

CSS

    section .container { 
        background: #333;
    }
    section .container #home { 
        padding: 10px 12px;
    }
    section .container #home div h1 { 
        background: whiteSmoke;
    }
    section .container #home div span,
    section .container #home div p { 
        color: #333;
    }

Nesting means "happy code" 

SCSS

    section .container { 
        background: #333;
        #home {
            padding: 10 12px;
            div {
                h1 {
                    background: whiteSmoke;
                }
                span, p {
                    color: #333;
                }
            }
        }
    }

We have nesting now.

If we separate the files, we get tons of http requests, otherwise we would have a extremely long file.

With partials we can separate stylesheet as we want without having to worry about those http request.

Partials files are represented like: _filename.scss

How to include partials

// _variables.scss
$lightSmoke: rgb(245, 245, 245);

// _header.scss
header {
    background: $lightSmoke;
}

// main.scss
@include "variables";

.container {
    @include "header";
}

SASS has a lot of libraries and frameworks ready to be used

It's really repetitive

CSS

.options .share-button{
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .add-to-collection{
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .delete-button{
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
} 

Sass can copy&paste things for you!

SCSS

@mixin option-button ($backgroundPng, $backgroundSvg) {
  background-image: url($backgroundPng);
  background-image: url($backgroundSvg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @include option-button(/static/img/icon-share.png, /static/img/icon-share.svg);}
.options .add-to-collection{
  @include option-button(/static/img/icon-add.png, /static/img/icon-add.svg);
}
.options .delete-button{
  @include option-button(/static/img/icon-delete.png, /static/img/icon-delete.svg);
} 

Maybe not that repetitive but still...

CSS

.options .share-button,
.options .add-to-collection,
.options .delete-button {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
}
.options .add-to-collection{
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
}
.options .delete-button{
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
} 

Such DRY...

SCSS

.option-icon-base {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @extend .option-icon-base;
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
}
.options .add-to-collection{
  @extend .option-icon-base; 
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
}
.options .delete-button{
  @extend .option-icon-base;
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
} 

Or even better...

SCSS

@mixin backgroundImage($imagePng, $imageSvg) {
  background-image: url($imagePng);
  background-image: url($imageSvg);
}
.option-icon-base {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @extend .option-icon-base;
  @include backgroundImage(/static/img/icon-share.png, /static/img/icon-share.svg);
}
.options .add-to-collection{
  @extend .option-icon-base; 
  @include backgroundImage(/static/img/icon-add.png, /static/img/icon-add.svg);
}
.options .delete-button{
  @extend .option-icon-base;
  @include backgroundImage(/static/img/icon-delete.png, /static/img/icon-delete.svg);
} 

It doesn't have operators.

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

Operators, yey!

SCSS

.container { width: 100%; }

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

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

How do I install it?