I thought about opening this blog post with a really terrible journalistic pun like: “It’s time to do more with LESS, and put a little SASS in your CSS.” But, of course I wouldn’t do that to you – I’m a serious person writing about serious development things.
Okay, so what are these things?
SASS and LESS are two different implementations of pretty much the same thing: Compiled CSS. If you’ve already started using one of these, then you’re probably nodding your head and about to go back to reading the latest xkcd, but if this is new to you, then you’re totally forgiven if you are thinking “Why on earth would I want that?”
Well, for starters, the Don’t-Repeat-Yourself principle should apply to all your code, including CSS. Using a CSS compiler allows you to define variables, and to apply some math to your CSS properties. For example, you could have the compiler calculate pixel widths for you if you’ve got a property defined like so with SASS:
$boxWidth: 720px;
.content {
width: 2 / 3 * $boxWidth ;
}
.side {
width: $boxWidth / 3;
}
The same thing is done very similarly with LESS, and both can do operations on colors as well, which is quite useful. For example, you could define a color and highlight on the opposite side of the color wheel using LESS:
@color: #4E8BE4;
.content {
color: @color;
}
.highlight {
color: spin(@color, 180);
}
If you decided later to change the base color of the design, your highlight would get recalculated for you. Both LESS and SASS have quite a few nice mathematical functions for colors, which makes it quite powerful for designers, or developers who are trying to translate a design into maintainable code.
These simple functions really only scratch the surface of what you can do, though. Both provide for the concept of “mixins”, where you import snippets and even provide values. So you can import CSS across projects, or even code that someone else has provided. One of the most common uses is a browser “Reset”, which helps to maintain consistency across multiple browsers. Each also can do nesting, so you can write fewer lines and have the compiler expand your CSS rules out for you.
You likely noticed a slight difference in syntax in those examples. SASS is a Ruby Gem, so you install Ruby and then can install the gem from your command line. LESS is actually done in JavaScript, so it runs in Node.js and even in modern browsers directly (for testing). So SASS uses Ruby language conventions, while LESS does the same but using JavaScript, and JSON of course. Choose whichever is more familiar to you. Node is bundled in with the WebWorks SDK, so you might see us use LESS in the future.
Since these tools compile your CSS files, there is a little set-up. You can run it manually on the command line of course, but that’s not fun for long. Both have utilities to watch files for changes and automatically compile for you. That’s pretty neat, but since I use our Ant Build Script for my apps, I should show you how nice it is to include a CSS compile step into your apps. For SASS, I actually use a tool called Compass, which is an extension to the SASS language with more mixins and reusable code. Since it includes SASS, it’s easier to just install the Compass tools, which is also a Ruby Gem. Assuming you’ve got the necessary prerequisites (Ruby or NodeJS) installed and on your path, you can integrate this easily into the build process. Our Build Script exposes some extension points, so you can just include a target in your build.xml which calls “compass.bat –compile”. For Mac and Linux you can probably just call the relevant exe directly, but on windows you run it through “cmd /c” as so:
<target name=”compass” depends=”build.-init” extensionOf=”build.Initialized”>
<exec executable=”cmd”>
<arg value=”/c”/>
<arg value=”compass.bat”/>
<arg value=”compile”/>
</exec>
</target>
The nice thing about using Compass is that it handles all the .scss files in your directory and puts them in the right output location all controlled by the configuration file. However, if you want to use SASS alone, you just call SASS with the input and output files:
<target name=”compass” depends=”build.-init” extensionOf=”build.Initialized”>
<exec executable=”cmd”>
<arg value=”/c”/>
<arg value=”sass”/>
<arg value=”styles.scss”/>
<arg value=”styles.css”/>
</exec>
</target>
Similarly, with LESS, call lessc from the command line with input and output files.
<target name=”compass” depends=”build.-init” extensionOf=”build.Initialized”>
<exec executable=”cmd”>
<arg value=”/c”/>
<arg value=”lessc”/>
<arg value=”styles.less”/>
<arg value=”styles.css”/>
</exec>
</target>
So, there you go. The really nice thing about both SASS and LESS is that you can use as much or as little of it as you want. You can write your standard CSS and gradually convert parts to leverage the advanced capabilities. With this you’re well on your way to becoming an outstanding designer/developer. Just send me a postcard when you are rich and famous.