Award-Winning Fjords Thomas Reynolds

Sass 3 Syntax

Edit: Added section on hyphens and underscores as requested by Chris Eppstein

Today a beta for Sass 3 was released. It comes with some interesting new syntax options so let's get it installed and dive into the new syntax and directives.

Installation

Go ahead and grab the Sass 3 prerelease by running:

gem install haml --pre

Converting Old Sass Files to New Syntax

The old css2sass command line tool has been replaced with sass-convert. Like the old tool, sass-convert can change css files into sass files. It can also convert css files to the new, optional, scss format. Finally, it can convert between scss and sass as well as upgrading old sass files to the new syntax.

Converting from Sass 2 to Sass 3 is as easy as:

sass-convert --in-place --from sass2 style.sass

There is also a --to flag which Sass 3 is the default. You could also convert --to scss if you wanted to experiment with that format.

New Syntax #1: No more equals signs

In Sass 2, lines which required parsing, contained functions or math had to begin with an equals sign instead of the normal CSS colon. Sass 3 has removed this requirement and we can all go back to using a colon for separating a style directive and it's value in CSS, Sass 3 or SCSS.

Before:

body
  background= image_url("background.png")

After:

body
  background: image_url("background.png")

New Syntax #2: Variable prefix

Formerly, the way Sass defined variables was using the exclamation point prefix. However, since the exclamation point is already used in CSS (with the !important directive) it always felt a little strange to use the same symbol in two different contexts. In Sass 3, variables are now defined with the dollar sign prefix similar to PHP.

Before:

!background_color= #ffffff

After:

$background_color: #ffffff

One nice side effect of this change is the ability to mix quoted and unquoted strings on the same line. Something I do often for font declarations and now I no longer need to wrap the whole section in an additional level of quotes.

Before:

!font_family= "'Lucida Sans', 'Lucida Grande', arial, sans-serif"

After:

$font_family: 'Lucida Sans', 'Lucida Grande', arial, sans-serif

New Syntax #3: Default variable values

Variable assignment used to use the ||= syntax from Ruby to only update a variable when it did not already exist. However, since the equals sign is no longer used in Sass 3, there is now a new, more CSS-like syntax for conditionally assigning a variable. Sass 3 uses a directive similar to !important, called !default, which is placed at the end of the assignment.

Before:

!font_size ||= 12px

After:

$font_size: 12px !default

New Syntax #4: Interchangeable underscores and hyphens

In the past, variables in Sass would only work with underscores used to separate the different "parts" of the variable name. This format is very Ruby-like, but I personally prefer to use hyphens in my CSS. Sass 3 allows both underscores and hyphens to be used, but there is an interesting twist. Sass 3 will allow their use interchangeably. If the variable is defined with underscores, it can still be called with hyphens. This should save some frustration for those using a Sass framework like Compass or Susy. You can use whichever form you want and Sass will find the correct variable.

Before:

!body_background_color= #000000

body
  background= !body_background_color

After (either will work):

$body_background_color: #000000
$text-color: #ffffff

body
  background: $body-background-color
  background: $body_background_color
  color: $text-color
  color: $text_color

Conclusion

That's all for now. There are several other nice features in Sass 3 such as the integration of compass-colors, a new mixin definition and inclusion syntax and the SCSS syntax. You can read about these in the Sass 3 Changelog. I may write about SCSS later, but I'm not a huge fan and will probably wait and let someone who has a bigger stake in the issue (those using LESS or those who adore single-line CSS) address it.