As you develop more CSS,
the manageability of the files and the elements becomes an issue. For instance,
do you create one large stylesheet or break it into smaller files, which
introduces questions about directory structure and so forth? Syntactically
Awesome Stylesheets (Sass) simplifies file
(resource?) management along with many other things.

Sass looks familiar

Sass was created by Hampton Catlin, who also brought us Haml
for HTML development. Ruby developers will know Sass well, as it is a standard
feature of Ruby on Rails.
Sass uses the same premise as TypeScript,
and even CoffeeScript
for JavaScript developers.

When using Sass, you develop your CSS as Sass-formatted
files. The Sass preprocessor or compiler accepts Sass-formatted code and
generates standard CSS.

What Sass brings to the table

Sass has too many features to list in this article, so let’s
take a look at the more impressive features it brings to CSS development.


One of the tedious aspects of CSS is using the same selector
over and over when working with child selectors. Sass allows you to nest child
selectors within the shared parent. The follow snippet demonstrates this feature
by specifying selectors for the list items within the unordered list all within
one selector.

#navbar ul {
margin-left: 20px;
margin-right: 20px;
color: #FFF;
.li {
background-color: #CCC;
} }


This feature brings a standard programming feature to CSS —
it allows you to define values that can be reused throughout a stylesheet. You declare a variable just like a property except you use the dollar sign ($) for variable names. Mathematical operations can be used on
variables as well. Furthermore, variables can be used in property names and
selectors by using the following format #{$variable name} (Sass calls this
interpolation). Sass supports six basic data types: numbers, text strings,
colors, boolean, null, and lists (values separated by spaces or commas).

$standardColor: #C0C0C0;
.h1 {
background-color: $standardColor;


This feature facilitates the reuse of styles or selectors —
you can think of it as an enhanced variable. Basically, you define some CSS and
assign it a name with the @mixin directive. The mixin can be reused throughout
your code via the @include directive. The power of mixins does not stop here,
as it allows the use of parameters as well; these allow you to utilize
variables (the parameters) within the block defined by the mixin.

I was racking my brain to come up with an example, but I
decided to use the great example on the Sass site, which defines a couple of mixins
that are used for the data selector.

@mixin table-base {
th {
text-align: center;
font-weight: bold;
td, th {padding: 2px}
@mixin left($dist) {
float: left;
margin-left: $dist;
#data {
@include left(10px);
@include table-base;


This is another standard programming feature that Sass brings
to CSS. Import allows you to break large stylesheets into smaller, more
manageable files. The @import directive is used to reference or import other Sass files. While import statements are
usually at the top of a Sass file, you may place them anywhere within a file.
Here is the basic syntax.

@import "filename without extension";


You can use one selector as the basis for
another. Basically, the second selector extends the first, so it has all of the
features of the first selector, plus what is defined in its own element. 

.baseSelector {
color: #000;
border: 1px;
.extendSelector {
@extend .baseSelector;
@background-color: #fff;


Sass supports multiline and single line comments that can be
created using the standard CSS syntax (/* comment */) as well as the
Sass-specific single line comment (// comment).

Using Sass as a command-line tool

Sass is available as a command-line tool, a Ruby module, or a
plugin for a Rack-enabled framework (think Ruby on Rails). I focus on the
command-line option in this article.

You start by installing the Sass gem: gem install sass
(Windows users will need to install Ruby
first). Figure A shows its installation on my MacBook Pro.

Figure A

Installing Sass in OS X

Once it is installed, you can use the command line to compile
your Sass code to its CSS counterpart. This is accomplished by running the sass
command, followed by the input filename and the output filename like this:

sass inputFile.scss outputFile.css

Figure B shows the command in action. Notice that I typed the
command incorrectly the first time (it was missing the colon). You can get a
complete list of Sass command-line switches with the –help switch (sass –help).

Figure B

Compiling and watching a scss file

Which tool is better?

My first project actually using Ruby introduced me to Sass. I
can see why developers love using Sass; it brings many development features to
the wild world of CSS. However, Sass is just another option in the mix of tools
like CoffeeScript, LESS and TypeScript, so which one should you use?

I’ve used LESS quite a bit on a Bootstrap-based application
and the other tools as test drives, and they all seem to have useful features
and quite a bit of overlap. I think what tool, if any, you use depends on the tools
you’re using; for instance, Microsoft developers will probably go with
TypeScript, Ruby developers will choose Sass, and so forth. I will likely stick
with LESS because I am a big Bootstrap supporter.

Do you like tools that bring some consistency to CSS? If so,
which tool do you prefer? Let us know in the discussion.