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:
CSS:
-
-
// new way to default that mimics the look of !important
-
$var: 12px !default;
-
-
// $ not !
-
$width: 13px
-
.icon
-
width: $width
-
-
// mixin definition
-
@mixin pretty-text
-
color: $prettiest-color
-
a
-
@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."
Related Content:
3.1 rating from 35 votes
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
@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…
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.