Haml/Sass 3 Beta 2 Released

To install:

gem install haml --pre

While the second beta release of Haml/Sass 3 doesn’t have as much splashy, exciting stuff as beta 1, it’s got its fair share of new features. As before, almost all of these are in Sass, although there is at least one quite exciting Haml in the pipeline.

Looking over the new features, basically none of them were written by me. Most were done by Chris Eppstein, creator of Compass and my collaborator on Sass. I suppose I’ve been hard at work on bug fixes and a great new feature that’s due out in RC 1.

sass-convert

A lot of the improvements in beta 2 have gone into sass-convert, which can be used both to update old Sass 2 files to the new Sass 3 syntax, and to convert between the Sass and SCSS syntaxes. Most of these have been in the form of various bug fixes, but there are a few notable features.

sass-convert --recursive

The --recursive flag for sass-convert allows it to convert entire directories at once. Just specify the syntaxes to convert from and to and point it at a directory. For example:

# Convert all Sass 2 files to SCSS
$ sass-convert --from sass2 --to scss --recursive public/styleheets/sass

# Update all Sass 2 files to Sass 3
# (-R is short for --recursive)
$ sass-convert --from sass2 --to sass -i -R public/styleheets/sass

sass-convert --dasherize

The --dasherize flag converts underscores to hyphens. Hyphens, nice-looking and more CSS-y than underscores, are allowed in variable names in Sass 3, and this option makes them easy to use in place of underscores. Since hyphens and underscores can be used interchangeably, this is safe to use in a library where backwards-compatibility is necessary.

Sass Features

Several new (albeit relatively minor) features have been added to Sass in beta 2, as well. Most of these were driven by Compass’s needs in deprecating old behavior.

Introspection Functions

Several new SassScript functions were added for inspecting the values of variables— numbers in particular. These are useful for checking to make sure that mixins are being used properly, especially for style libraries like Compass. The following four new functions have been added:

• type-of returns the type of a variable as an unquoted string. For example, type-of(12px) returns number, and type-of(#23238E) returns color.

• unit returns the unit of a number as a quoted string. This is straightforward in most cases; for example, unit(12px) returns "px". However, Sass allows complex units; in those cases, this returns them using standard math notation. For example, unit(1px*2em) returns "px*em", and unit(80deg/3mm) returns "deg/mm".

• unitless returns true if a number has no units, and false otherwise.

• comparable returns whether or not two numbers can be compared and used together in math operations. This depends on the units of the numbers. Numbers without units can be used with any other numbers, but if both numbers have units they must be on the same scale. For example, comparable(2mm, 3cm) is true since millimeters can be converted into centimeters, but comparable(10px, 2em) is false, since pixels can’t be converted into ems.

@warn

A new @warn directive has been added that takes a SassScript string and prints it as a warning, complete with a stylesheet trace to help users figure out what caused the warning. For example:

@mixin foo {
  @warn "You used the foo mixin? Don't use the foo mixin.";
  display: none;
}

.foo {
  @include foo;
}

This would print:

WARNING: You used the foo mixin? Don't use the foo mixin.
        on line 2 of warning.scss, in `foo'
        from line 7 of warning.scss

The @debug directive used to be the recommended way of issuing warnings, but that added more cruft to the printed output, and didn’t include a stylesheet trace for locating the cause of the warning. Now @debug is only recommended for its original purpose: debugging complicated SassScript.

:quiet Option

The changes to the Sass syntax in Sass 3 cause a lot of deprecation warnings, and @warn will only result in more. While deprecations should be dealt with in a timely manner, sometimes they’re just annoying. The :quiet option for Sass (or --quiet on the command line) silences them.

Sass::Plugin Speed

The last big improvement is due to thedarkone on GitHub. Sass::Plugin, which updates CSS files when Sass files change, has been seriously sped up. For the technically inclined, this is done via two layers of caching: one remembers which files import which others over a long period of time, and one remembers when files last changed and whether they need updating during a single update check.

This should make Sass updating faster for folks using it in development mode in a Ruby web framework, especially if they have a lot of styles. It should also improve speed for anyone using sass --watch, or to a lesser extent sass --update.