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.
Go ahead and grab the Sass 3 prerelease by running:
gem install haml --pre
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.
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")
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
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
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
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.
Comments?
Let me know at thomas@awardwinningfjords.com and I'll amend the article as necessary.