Sass continues to provide innovative new ways to DRY up our CSS. Version
3.1 is
out
and offers many new language features, compilation performance improvements, and some new command line options.

Sass, extend thyself with Sass-based functions

Rubyists have long had the ability to extend Sass, but now anyone can
create powerful functions using only Sass:

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

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

Lists

Sass now includes some handy functions to work with lists introduced in
version 3.0 including nth, append, join, and length:

$ sass -i
>> nth(1px 2px 10px, 2)
2px
>> append(1px 2px, 5px)
(1px 2px 5px)
>> length(5px 10px)
2

There is also a new @each directive to iterate over lists:

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

New command line utility and breaking changes

Sass 3.1 brings changes to command line tools and some breaking changes:

  • There is a new scss command line utility to compile stylesheets, defaulting to the SCSS syntax.
  • @import used with a path without a file extension will now throw
    an error
  • Old-style ! variable support has been removed
  • The css2sass command line utility has been removed in favor of
    sass-convert.

Check out the
Changelog
for complete release details. For a deeper look at Sass and Compass, check out our upcoming book Sass and Compass in Action from Manning, now in early access.

[Source on GitHub]


Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.