Kickin' Sass
I remember about a year ago when Steve and I got really excited thinking about how cool it would be to programmatically process stylesheets in Harmony. Our initial idea was to allow running stylesheets through liquid so you could assign variables for colors and run loops for repetitive styles.
Thanks to Sass, LessCSS, and a few hours of work, that dream is not only alive, but freakin’ awesome. Next to the filename of any stylesheet, you will now notice a drop down that allows you to select a processor for that stylesheet.
When that stylesheet gets rendered, it will run through the processor you selected and convert your Sass or Less declarations into pure CSS. If you are familiar with Less or Sass, feel free to start kicking the tires and let us know what you think. For those that are not familiar with these tools, read on.
What are Sass and Less?
So what are these tools? Sass and Less are meta-languages on top of CSS that allow for more power than plain old stylesheets. They have slightly different syntaxes, but both allow you to define variables, nest declarations, and mixin commonly used declarations.
Less uses existing css syntax, to allow you to do stuff like this:
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}brand_color is a variable that is declared at the top and can be re-used throughout your stylesheet. If you use the same color in multiple places, this allows you to change them all in one place. Cool, eh?
Sass takes a bit different approach, making braces and semi-colons a thing of the past.
!brand_color = #4D926F;
#header
color = !brand_color
h2
color = !brand_colorAs you can see, Sass and Less use a bit different syntax, but both provide a lot of power. I won’t cover all of their features in depth here, just thought I would show variables off to give you an idea of why it is cool. If you are curious and want to learn more, check out the documentation sites for Sass and LessCSS.
Wow, this is freakin’ awesome! I hadn’t noticed it in the back-end. Nice one!
@Galen: Ha. Glad you like it. We are stoked about features like this. Fun to implement and fun to use.
I agree with Galen, Wow! That will be awesome! I really can’t wait to get my hands on Harmony now.