Awesome Syntax Changes in Sass 3

Update: Sass 3 Beta 2 introduces a sass-convert --recursive flag for recursively converting stylesheets. This post has been updated to use that flag.

Update: Sass 3.1 no longer supports converting from Sass 2 syntax to Sass 3 syntax. If you still need to do this, install version 3 of the haml gem.

In addition to a brand new syntax, Sass 3 introduces two major changes and one minor change to the existing syntax. I think pretty much everyone will agree that they’re good changes, though. In addition, to ease the upgrade path, Sass 3 also introduces a new, turbocharged version of css2sass known as sass-convert. sass-convert can convert files between CSS, Sass, and SCSS, as well as convert files from the old Sass 2 syntax to the new Sass 3 syntax:

# Convert a single file to the Sass 3 syntax
$ sass-convert --from sass2 --in-place style.sass

# Convert all files to the Sass 3 syntax
$ sass-convert --from sass2 --to sass --in-place --recursive .

$var, Not !var

Sass 3 no longer uses the ! prefix for variables. It still works, for backwards-compatibility, but it prints a warning and will be removed in Sass 3.2. Instead, the more aesthetically appealing $ prefix is used.

The reason for this decision is simply that no one really liked !. It was originally chosen to parallel the !important syntax, but since !important isn’t really a variable, that didn’t make much sense.

$ was chosen primarily because it’s not used elsewhere in CSS, and so doesn’t conflict, syntactically or cognitively. It’s also used for variables in other languages, including occasionally Javascript, which many designers have at least passing familiarity with.

No More =

The = character is no longer required for using SassScript. Ever. Anywhere. : should now always be used instead for properties, variables, and even default arguments to mixins. Here’s an example:

$height: 34px

h1
  height: $height
  line-height: $height/2 + 2px

This was one of the most consistent complaints I’ve heard with Sass, including from myself. Many was the time I would ponder why my Sass didn’t work, only to find that I forgot to change a colon to an equals. May this never plague anyone again.

SassScript Changes

The SassScript syntax has also been slightly modified so that it will properly parse all valid CSS properties. SassScript used with the deprecated = character will work as it did in 2.2 for backwards-compatibility, but this prints a warning and will be removed in 3.2.

String Changes

In Sass 2, strings with quotes were rendered without quotes and strings without quotes were deprecated¹. In Sass 3, strings with quotes are rendered with quotes, and strings without quotes are rendered without quotes. In addition, there are now quote() and unquote() functions to convert a string to one form or the other.

There is still one place where strings with quotes render without them: when using #{} to insert a string in a selector or property, that string is always rendered without quotes.

Division and /

Two numbers separated by a / character are allowed as property syntax in CSS, e.g. for the font property. SassScript also uses / for division, however, which means it must decide what to do when it encounters numbers separated by /.

For CSS compatibility, SassScript does not perform division by default. However, division will be done in almost all cases where division is intended. In particular, SassScript will perform division in the following three situations:

1. If the value, or any part of it, is stored in a variable.
2. If the value is surrounded by parentheses.
3. If the value is used as part of another arithmetic expression.

Hyphens in Names

The minor change is that all identifier names in Sass, including variables, can now use the full range of CSS identifiers, including those with hyphens. Honestly, I’m not sure why I hadn’t added hyphen support before now.

Moreover, to aid the transition from underscored names to hyphenated ones, either one may be used to refer to the other. For example, the variables $main_width and $main-width are considered to be the same.

¹ We did this in anticipation of getting rid of the variable prefix entirely. However, now that all property values are SassScript, we need that prefix to distinguish variables from CSS values like bold and solid.