sass - syntactically awesome style sheets

SASS Cheat Sheet - Syntactically Awesome Style Sheets

Use type: text/scss on the style tag

<style type='text/scss'>
</style>

Define a variable:
$varname: value;
  Sample:  $text-color:red

Nesting css elements
.foo {
     p {
          color:red;
       }
   }

mixins:
--------
Define:
@mixin funcname($arg1, $arg2) {
   blah($arg1);
}
Use:
@include funcname("blah","blah2");

In mixins - conditionals
@if $val == foo
@else if $val == blah
@else

looping:
@for $var from 1 through 6 {
   .classname-#{$var} { font-size: 15 * $var}
}
loop over list:
@each $var in blue,green,red {
   .#{$var}-text { color: $var; }
}

while statement:
$var : 0;
@while $var < foo {
   .column-#{$var} { font-size: 12 * $var;}
    $var: $var +1;
}

import partials:
@import "filename"
_filename.scss would be file.

extend:
@extends .otherrule