My impressions with Sass

I have been meaning to try out Sass for a long time but I never got the occasion.

Since I have a simple web site for my consulting company, NP-complet (in french), I decided to convert it’s CSS code to Sass.

What is it?

Sass is an extension to CSS3. You can build your style sheets in Sass using one of it’s two syntaxes. Then you can either translate it to CSS from the command line which is what I did, or using a web-framework plugin which I did not try.

Sass adds many features for creating style sheets not present in CSS like variables, inheritance and nesting.

Should I use it?

Like the other, similar CSS meta languages it has it’s share of detractors and it’s, proponents.

My personal impressions have been thus far very good.

For example, while I was working through the tutorial, in the nesting section it was mentioned:

Often when writing CSS, you’ll have several selectors that all begin with the same thing. For example, you might have “#navbar ul”, “#navbar li”, and “#navbar li a”. It’s a pain to repeat the beginning over and over again, especially when it gets long.

That argument didn’t really convince me. While I understand this repetition problem and I’m all for DRY, I wasn’t sure the problem was troubling enough to warrant the use of a CSS extension.

I converted my CSS file using nesting anyway, deciding that I would judge the merits of this feature after using it.

I immediately found the code more organized and easier to work with. I then checked the CSS output to see what Sass had generated.

I opened the original “before” CSS, the Sass .scss file and Sass generated CSS output file.

Seeing those three files side by side is when Sass’s advantage really struck me. The .scss file was so easy to read and understand compared to the original base CSS file.

You can judge for yourself, but before I present the css I just want to say that some of my css has been copied verbatim from the Twitter Bootstrap documentation site.

This is an excerpt of the css file “before” the Sass conversion:

.navbar {A
padding-top: 20px;
}

.navbar .navbar-inner {
padding: 0;
}

.navbar .nav {
margin: 0;
display: table;
width: 100%;
}

.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}

.navbar .nav li a {
font-weight: bold;	
font-family: notJustGroovyFont, DejaVu Sans, Liberation Sans, Verdana, Arial;
font-size: 1.1em;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}

.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}

And this is the Sass .scss file I wrote from my existing css:

.navbar {
	padding-top: $padding*2;
	
	.navbar-inner { padding: 0; }
	
	.nav {
		margin: 0;
		display: table;
		width: 100%;
		
		li {
			display: table-cell;
			width: 1%;
			float: none;
			
			a {
				font: {
					weight: bold;
					family: notJustGroovyFont, DejaVu Sans, Liberation Sans, Verdana, Arial;
					size: $medium-font-size;					
				}

				text-align: center;
				
				border: {
					left: 1px solid rgba(255,255,255,.75);
					right: 1px solid rgba(0,0,0,.1);	
				}
			}
			
			&:first-child a {
				border: {
					left: 0;
					radius: 3px 0 0 3px;
				}
			}
			
			&:last-child a {
				border: {
					right: 0;
					radius: 0 3px 3px 0;
				}
			}	
		}
	}
}

Notice that you can nest both selectors and properties.

Another feature of Sass that improves readability is variables. Compare these two files:


$np-complet-green: #98cb60;
$dark-grey: #888888;
$padding: 10px;

.masthead {
	margin-top: 1%;
	background-color: $np-complet-green;
	box-shadow: $padding $padding $padding/2 $dark-grey;
}

Which is much clearer than the CSS without variables.

.masthead {
margin-top: 1%;
background-color: #98cb60;
box-shadow: 10px 10px 5px #888888;
}

#98cb60 doesn’t speak much to me besides, it’s a color. $np-complet-green on the other hand quickly tells me it’s the same green color that is used in my NP-complet logo. Even if this information does not need to be repeated more than once, the improved readability is clearly worth it.

I also like the fact that I can now declare all my color variables at the top of the .scss file which will help when I will need to change some colors later on.

More

Sass also has other great features besides nesting and variables, namely supporting math operations on variables, mixins with arguments and having imports statement in the .scss file that do not result in additional http requests once generated.

For reference you can check my entire scss file here, the CSS output file here and the original pre-Sass CSS file here.

One thought on “My impressions with Sass

  1. Great article Gilles … SASS looks great but I still prefer to minimize the amount of css in my projects. It’s interesting that you mentioned Bootstrap … I am using it in my current project. This is by far the best framework I have found so far to quickly build great modular web applications.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s