SASS

Mixins:
----
Example 1:

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(50px, blue);
}

.big-red-square {
  @include square(200px, red);
}

Example 2:

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

.box { 
  @include border-radius(10px); 
  margin:20px;
  width:50px; 
  height: 50px;
  border: 1px solid red;
}


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

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

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

Placeholder Example(Solves @extend problem of unnecessary style in output):
----

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  background: red;
}

.info-icon {
  @extend %icon;
 background: yellow;
}

Exercise: Convert the above placeholder into a mixin and observe the disadvantage of a mixin

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  background: red;
}

.info-icon {
  @include icon;
 background: yellow;
}

nesting

No more than 4 levels

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
      padding:5px;
      border:1px solid red;
    }

  }

}

variables & functions

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

http://sass-lang.com/documentation/Sass/Script/Functions.html