Sass brings standard programming features to CSS

Syntactically Awesome Stylesheets, or Sass, offers a lot of impressive features that simplify CSS development.

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, LESS, 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

The scss file extension is standard for Sass. One cool feature is that you can have Sass watch for changes to your scss file. If changes occur, it automatically updates the corresponding CSS. This is accomplished with the watch command-line parameter (two dashes followed by the watch keyword).

sass --watch 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.