SASS

(A turing complete language library)

Code Usage

Variables

$cf-Orange: #474546; 

h1 {
  font-size: 20px;
  color: $cf-Orange;
}

Code Usage

Nesting

header { 
  margin: 20px 0;

  h1 {
    color: $cf-Orange;
  }
}

Code Usage

Mixins

@mixin rounded-corners($radius: 8px) {
  border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}

#footer {
    border: solid 1px $cf-Orange;
   @include rounded-corners(10px);
}

Partials & Import

Let's refer transformers code structure

Object-oriented CSS is awesome

OOCSS

Not Semantic!!

<a href="#" class="btn redbg">Twitter</a>
<a href="#" class="btn bluebg">Facebook</a>

Classes should be semantic!

<a href="#" class="redbtn">Twitter</a>
<a href="#" class="bluebtn">Facebook</a>

mixin

<a href="#" class="redbtn">Twitter</a>
<a href="#" class="bluebtn">Facebook</a>

@mixin btn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}

.redbtn {
  @include btnbase;
  background:red;
}
.bluebtn {
  @include btnbase;
  background:blue;
}

mixin vs extend vs placeholder

Let's keep it DRY

<a href="#" class="redbtn">Twitter</a>
<a href="#" class="bluebtn">Facebook</a>

 .btn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}

.redbtn {
  @extend .btn;
  background:red;
}
.bluebtn {
  @extend .btn;
  background:blue;
}

mixin vs extend vs placeholder

Even more DRY ! 

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container-with-floated-children {
  @extend %clearfix;
}