My Five Favorite Things About SASS (The CSS Extension Language)

I recently had the opportunity to teach HTML and CSS to a class of women through Chicago Women Developers, an organization devoted to the advancement of women in tech. As a part of that course, we covered Sass: a CSS extension language that makes stylesheets easier to read and use for developers, then converts into plain CSS for the browser to read at runtime.

In order to demonstrate how Sass works, I showed the class a few examples of the language in Sassmeister, which does the Sass-to-CSS conversion before your eyes. Then I took screenshots! Though we didn’t cover all of Sass, we did cover several well-loved staples. Here are demonstrations of my five favorite Sass functionalities, in ascending order:

5. Maths

There are several hallmarks of excellent code. One of them is that the code clearly indicates intent. However, When you look inside a plain CSS stylesheet at screen widths and box sizes, all you see is a number. Why did the designer or developer choose that number? S ometimes it doesn’t matter (I like 24 point font, and I’m the expert, capiche?), but sometimes it does: say, if Developer A chose a specific size to conform to a desktop computer screen width, and now Developer B is responsible for creating the iPad app. One could leave a comment in CSS for questions like these, but in Sass, we’re allowed to show our work:

Screen Shot 2014-09-22 at 8.26.52 PM

This is much clearer, no comments necessary!

4. @extends

In Sass, I can make a basic template for objects that are structurally or stylistically similar, then have the styles of each of those objects @extend my basic template, plus their own custom styling. Think of it as inheritance for stylesheets. Like so:

Screen Shot 2014-09-22 at 8.12.30 PM

This creates a basic template for the styling of some pop-up messages, then styles each of the pop-up messages according to what kind of pop-up message it is.

3. @mixins

@mixin, like @extend, allow me to create a group of style choices with the marker @mixin, then stick them into any other style definition with the marker @include. There are two examples below: one, called website-theme, that defines some basic styling to apply to several pieces of a website (but perhaps not all—thus why we have not just applied these styles to some kind of all-encompassing div).

The other one, called border-radius, accepts an argument—the argument $radius. This mixin exemplifies a way to easily package up cross-browser compatibility in your styling when different browsers each have their own tags for the same thing (as is the case with border-radius). In this example, I set the $radius to be the same across all browsers: if, for some reason, you wanted them each to have different border-radii based on some initial number, you could combine the power of mixin arguments with the power of explicit math to do that in your mixin.

Screen Shot 2014-09-22 at 8.04.37 PM

Below, you can see a demonstration of using the same mixin with a different argument passed in:

Screen Shot 2014-09-22 at 8.05.33 PM

It works exactly the way it looks like it should work. This, in the software world, is a very good thing.

2. Nested Styling

When I have a lot of styles that apply to the same unit of visual information on my website, I want them to appear in a unit in my stylesheet as well. So, when I have several elements inside, say my navbar, and I want to style them all specifically for my navbar, I can organize them in Sass by nesting them: 

Screen Shot 2014-09-22 at 7.55.18 PM

Perhaps this feature also appeals to the backend developer in me: it DRYs up the code by removing the repetition of .nav in the CSS.

1. Variables

The trick that we used above to create a variable in a mixin is also available throughout a Sass document:

Screen Shot 2014-09-22 at 7.51.01 PM

To make a variable in Sass, you put a $ at the front of the word.

The reasons you would want variables in a stylesheet are exactly the same reason you would want variables in any computery language: they reduce duplication in the code. They allow you to more clearly express that the #F5F5F5 that currently graces several spots in your css is actually your chosen $textbox-background-color, and you can change all those textbox backgrounds in one place by changing the variable declaration.

In fact, given that variables are one of the first things you learn in almost any computery language, one is forced to wonder why stylesheets didn’t already have them. But now they can, thanks to Sass and other language extensions like Sass (LESS comes to mind, though I have never used that).

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