Sass 3.1 released, now with functions, lists, and @media bubbling
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, andlength:$ sass -i >> nth(1px 2px 10px, 2) 2px >> append(1px 2px, 5px) (1px 2px 5px) >> length(5px 10px) 2There is also a new
@eachdirective 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
scsscommand line utility to compile stylesheets, defaulting to the SCSS syntax.@importused with a path without a file extension will now throw an error- Old-style
!variable support has been removed- The
css2sasscommand line utility has been removed in favor ofsass-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.