2.01 SASS

References

SASS Homepage

Use Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. Here's an example:

$color-primary:  blue;
$border-radius: 5px;

.box {
  background-color: $color-primary;
  border-radius: $border-radius;
}

button {
  background-color: $color-primary;
  border-radius: $border-radius;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. Here's an example for border-radius.

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

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