number   = 42

number = -42 if opposite

square = (x) -> x * x

list = [1, 2, 3, 4, 5]

math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

$my-color: #ab42ef;

body {
  background: $my-color;
}

@mixin my-style {
  background: red;
}

.my-box {
  @include my-style;
}

• 1 image
• 1 HTTP request
• small file size

=> very fast

@import "squares/*.png";
@include all-squares-sprites;

.squares-sprite, .squares-10x10, .squares-20x20 {
  background: url('/squares.png') no-repeat;
}

.squares-10x10 {
  background-position: 0 0;
}

.squares-20x20 {
  background-position: 0 -10px;
}

$squares-sprite-dimensions: true;
@import "squares/*.png";
@include all-squares-sprites;

.squares-sprite, .squares-10x10, .squares-20x20 {
  background: url('/squares.png') no-repeat;
}

.squares-10x10 {
  background-position: 0 0;
  height: 10px;
  width: 10px;
}

.squares-20x20 {
  background-position: 0 -10px;
  height: 20px;
  width: 20px;
}

$squares-10x10-spacing: 33px;
@import "squares/*.png";
@include all-squares-sprites;

.squares-sprite, .squares-10x10, .squares-20x20 {
  background: url('/squares.png') no-repeat;
}

.squares-10x10 {
  background-position: 0 0;
}

.squares-20x20 {
  background-position: 0 -43px;
}