Sass 3.1 released, now with functions, lists, and @media bubbling

Wynn sat down with Nick Quaranto at Red Dirt Ruby Conference to talk about Gemcutter, RubyGems.org, and how to get started creating your own Ruby gem.

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.

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;}

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'); }}

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 errorOld-style ! variable support has been removedThe 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]