The Evolution of SASS

25 April 2011

Source: SASS changelog (via Hackernews) SASS is great. It is CSS done right. SASS manages to both increase simplicity and add expressiveness. The absence of curly brackets and semicolons makes me smile. This is an excerpt from their 3.1 changelog:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Whoops, functions? Really? But there is more:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

There we have iterators …

if(true, 1px, 2px)

… and if clauses. Farewell, simplicity.