CSS gets more Sassy with version 3

CSS gets more Sassy with version 3

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:

CSS:

  1.  

  2. // new way to default that mimics the look of !important
  3. $var: 12px !default;
  4.  

  5. // $ not !
  6. $width: 13px
  7. .icon
  8.   width: $width
  9.  

  10. // mixin definition
  11. @mixin pretty-text
  12.   color: $prettiest-color
  13. a
  14.   @include pretty-text
  15.  

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.”

😀 yuhuuuu!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s