After succesfully having used SCSS on a couple of projects i thought it was time to get into the more advanced features it provides. Therefore i compiled this “Cheat Sheet” type overview of what i find the most usefull collection of SCSS features.

At the bottom of the page you can download a PDF version of this page to print out and have at hand when you need it.

Basics

Variables:

$red: #ff0000;

Usage:

.myClass {
  color: $red;
}

Nesting

Avoids repetition by nesting selectors within one another.

nav ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    display: inline;
    a {
      color: $red;
    }  
  }
}

“&”

Referencing Parent Selectors */

a {
  color: #ff0000;
  &:hover {
    color: #666666;
  }
}

Mixins

Re-use whole chunks of CSS, properties or selectors.

@mixin myfont ($size, $weight, $family){
  font: {
    size: $size;
    weight: $weight;
    family: $family;
  }
}

.myClass {
  @include myfont(18px, "bold", "Arial,Helvetica,sans-serif");
}

Nested Properties

.myFont {
  font:{
    family: Arial;
    size: 14px;
    weight: bold;
  }
}

Selector Inheritance (Using @extend)

Give a selector the styles of one, PLUS any additional. This way you don’t repeat classes.

.myClass {
  color: #ff0000;
  margin: 10px;
}

.anotherClass {
  @extend .myClass;
  border: 1px #000 solid;
}

Advanced

!Default

/* !default: If a variable isn’t given a value, it uses the one set for default.

$color: #000000;
$color: #ff0000 !default;

.myClass {
  color: $color;
}

Compiles to black – if color isn’t defined, then it gets red.

.myClass {
  color: #000000;
}

Operations: + – * / %

$width: 1000px;

.myClass {
  width: $width - 400px; // $width variable minus 400px = 600px
}

###Interpolation: #{}

$className: samcro;

$attr: background;

a.#{$className} { #{$attr}-color: #000000 }
Compiles to

a.samcro {
  background-color: #000000;
}

Partials

Additional Sass/SCSS files you want to import but don’t want to compile into additional CSS files (meaning styles are imported into the main .scss file)

Just save the new file with an underscore in front of it: _nav.scss, then in the main sass/scss file type – (NOTE – You will get an error if you do not have it AFTER your declared variables and stuff).

@import "nav";

@if, @elseif, @else

$type: monster;

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for

This could be really badass on lists if you needed them each to have unique styles (@while works similar)

@for $i from 1 through 3 {
  .myClass-#{$i} { width: 2px * $i; }
}

Compiles to

.myClass-1 {  
  width: 2px;
}  
.myClass-2 {  
  width: 4px;
}  
.myCass-3 {  
  width: 6px;
}