Wednesday, March 31st, 2010

CSS gets more Sassy with version 3

Category: CSS

Nathan Weizenbaum promised that Sass will become a superset of CSS back in June 17, 2009.

And we now have version 3 of Sass and Haml available that brings life to the promise:

  • The new syntax is known as “SCSS”, for “Sassy CSS”
  • SCSS was built from the ground up based on the CSS3 spec, and is 100% CSS3-compatible
  • SCSS can do anything Sass can do
  • SCSS files can import Sass files, and vice versa
  • This means you can use Compass with SCSS right now

Take a look at the release notes to see how SCSS looks, as well as other changes to the library.

Some changes that peak out:

  1. // new way to default that mimics the look of !important
  2. $var: 12px !default;
  4. // $ not !
  5. $width: 13px
  6. .icon
  7.   width: $width
  9. // mixin definition
  10. @mixin pretty-text
  11.   color: $prettiest-color
  12. a
  13.   @include pretty-text

Oh, and it all works nice with FireSass: “A new :debug_info option has been added that emits line-number and filename information to the CSS file in a browser-readable format. This can be used with the new FireSass Firebug extension to report the Sass filename and line number for generated CSS files.”

Posted by Dion Almaer at 11:53 am

3 rating from 36 votes


Comments feed TrackBack URI

Since CSS driven layout is becoming the norm, isn’t CSS becoming the standard API for user customization? Forcing them to learn another language variant – however cool – seems too risky – at least for our comapny’s user base

Comment by AngusC — March 31, 2010

@AngusC: This is not a new client-side language. I gets compiled to regular css. Take a look at their website, it might surprise you how easy it all works, I’m thinking about using this for my next project.
PS: I do think it’s a bit user-unfriendly to expect your users to be proficient in css to change their interface…

Comment by daanlib — April 1, 2010

It looks just as bad as normal sass. No idea why people like it, apart from being able to declare variables, but that can be done in normal CSS syntax if you make for yourself tool to “compile” it to working CSS.

Comment by paziek — April 1, 2010

Leave a comment

You must be logged in to post a comment.