Sass basics

demo.scss

/* 
 - elem1 { elem2 { ... } }
   has the effect of compiling to elem1 elem2 { ... }
 - .class1 { &.class2 { ... } }
   compiles to .class1.class2 { ... }
 - .class1 { .class2 & { ... } }
   compiles to .class2 .class1 { ... }
*/
nav {
  h1 {
    text-decoration: underline;
  }
  &.class {
    color: #313131;
  }
  content & {
    color: green;
  }
}

/* variables:
 - prefixed with $
 - can take
   + booleans
   + numbers (with or without units)
   + colors (named, rbga, hexadecimal)
   + strings (w or w/o quotes)
   + lists (comma separate or not)
   + null
 - scoped within { } -- changes are global, though.
 - interpolation with #{$variable}
*/

$base: #777777;
$side: top;

.sidebar {
  border: 1px solid $base; // color is still #7777
  p {
   $base: #888;
    color: $base; // color is #888
  }
}
h1 {
  color: $base; // color is #888
}

sup {
 #{$side}: -0.5em; // top: -0.5em
}

.callout-#{$side} { // .callout-top
 background: #888;
}

// Mixins:
// copy the 'button' styling inside the .btn-a and .btn-b selectors
// using the specified parameter as a means to modify the `background` property.
@mixin button($color: #777) {
 border: 1px solid #ccc;
 font-size: 1em;
 background: $color;
}
.btn-a { @include button(#999); } // pass in regular value
.btn-b { @include button($color: #888); } // pass in keyword-value argument

// for variadic mixins, use $val...
@mixin transition($val...) {
 -webkit-transition: $val;
}
.btn-a {
 @include transition(color 0.3s ease-in, background 0.5s ease-out);
}

// the ... operator can spread out list variable as well. E.g,
@mixin button($radius, $color) {
 border-radius: $radius;
 color: $color;
}

$properties: 4px, #000;
.btn-a {
 @include button($properties...);
}

/* @extend -- extensions -- do exactly what they sound like:
   they allow a selection to extend another selection.
*/
.btn-a {
 background: #777;
 font-size: 1em;
}
.btn-b {
 @extend .btn-a;
 background: #ff0;
}
.sidebar .btn-a {
 text-transform: lowercase;
}

// the above will also generate a selector for .sidebar .btn-b
// since .btn-b extends .btn-a!

// to avoid this, we can use % -- placeholders:
%btn {
 background: #777;
 font-size: 1em;
}
.btn-a {
 @extend %btn;
}
.btn-b {
 @extend .btn;
 background: #ff0;
}
.sidebar .btn-a {
 text-transform: lowercase;
}
// this no longer generates .sidebar .btn-b selection

// functions:
@function fluidize($target, $context) {
 @return $target/$context * 100%;
}

p {
 width: fluidize(100px, 350px);
}

// if -- have ==, !=, >, >=, <. <= as comparators
$theme: dark;
header {
 @if $theme == dark {
  background: #000;
 } @else if $theme == pink {
  background: pink;
 } @else {
  background: #fff;
 }
}

// each:
$authors: nick aimee dan drew;
@each $author in $authors {
 .author-#{$author} { color: #fff; }
}

// for:
.item {
 position: absolute;
 right: 0;
 @for $i from 1 through 3 {
  &.time-#{$i} { top: $i * 30px; }
 }
}

// while:
$i: 1;
.item {
 @while $i < 4 {
  &.time-#{$i} { top: $i * 30px; }
  $i: $i + 1;
 }
}

/* When to use?

Mixins:
- Similar sets of propreties used multiple times with small variations

Extend:
- Sets of properties that match _exactly_

Functions:
- Commonly-used operations to determine values
*/