SASS: Taking CSS to the next level

If you’ve been around the block for a little while, you’ve probably heard of SASS or one of the other CSS preprocessors before. A CSS preprocessor, when you boil it down, is a way of writing CSS in a language similar to CSS (usually just with syntactical differences), in a way that takes the amount of time spent writing the CSS itself.

“That sounds great!” You might say. And yes. You would be correct. The only hitch is that because these are written in a language other than CSS, you will need to process what you write before it can be used by browsers – hence the term preprocessor.

For this article, we will be focusing on SASS as the preprocessor that supports both .sass and .scss files and formatting, but will be using SCSS for readability. There will also be the compiled output to compare it to.

One of the largest differences between SASS and SCSS is their look:

SASS:

div ul li

color: #fff

font-weight: bold

a

color: blue

span

Text-decoration: underline

/* SASS says that you can leave semicolons and brackets out */

SCSS:

div ul li {

color: #fff;

font-weight: bold;

a {

color: blue;

}

span {

Text-decoration: underline;

}

}

/* SCSS doesn’t really mind them so much, and actually prefers them */

Compiled CSS:

div ul li {

color: #fff;

font-weight: bold;

}

div ul li a {

color: blue;

}

div ul li span {

Text-decoration: underline;

}

/* Plain-Jane, CSS */

For starters, let’s take a look at this plain CSS snippet below:

#myContainer {

background: #ccc;

width:50%;

padding: .5rem;

margin:0 auto;

font-family: sans-serif;

}

#myContainer ul {

margin:0;

padding:0;

list-style:none;

line-height:2rem;

}

#myContainer ul li a {

background: #ddd;

border-radius: 3px;

box-shadow: 0 -3px rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(0,0,0,0.15) inset;

margin: .5rem 0;

padding: .5rem;

width: 100%;

display: block;

color: #555;

text-decoration: none;

box-sizing: border-box;

}

#myContainer ul li a:hover {

background: #eee;

}

#myContainer ul li a span {

color: #cc6699;

font-weight: bold;

}

#myContainer ul li:last-child a span {

color: blue;

}

See all of that repetition? “#myContainer” is repeated for each selector out of the need for specificity! Here’s the total tally for repetitions using plain CSS for just this small portion of the average stylesheet:

#myContainer: 5 times

#myContainer ul: 4 times

#myContainer ul li a: 3 times

I think we can make it a little shorter and more organized. Let’s try this:

#myContainer {

background: #ccc;

width:50%;

padding: .5rem;

margin:0 auto;

font-family: sans-serif;

ul {

margin:0;

padding:0;

list-style:none;

line-height:2rem;

li a {

background: #ddd;

border-radius: 3px;

box-shadow: 0 -3px rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(0,0,0,0.15) inset;

margin: .5rem 0;

padding: .5rem;

width: 100%;

display: block;

transition: all 0.2s;

color: #555;

text-decoration: none;

box-sizing: border-box;

&:hover {

background: #eee;

}

span {

color: #cc6699;

font-weight: bold;

}

}

li:last-child a span {

color: blue;

}

}

}

 

And again with the tally:

#myContainer: 1 time

#myContainer ul: 1 time

#myContainer ul li a: 1 time

This example is not perfect, and SASS (or the SCSS that we are using above) can be made more future-proof in fairly easy ways. What if at some point in time, we decide that we want to change colors, but we are reusing that color hex all over the place? Sure, you could do a bulk search and replace, but wouldn’t it be easier if you could just re-assign a variable that you’ve been using to a different color and allow it to auto-recompile the moment you save?

#menu ul li a { color: #f00; }

.wrapper { color: #f00; }

.niceLink  { color: #f00; }

Now, as the amazingly intelligent front-end developer that you are, you know what #f00 translates into, but for the sake of making this easy to follow, it is pure red. Arguably not *generally* the best color for links, but it gets the point across. With our example above, we want to make all of those red links into orange links. We will have to go through every line (and in our full stylesheet, we surely have that color mentioned a few more times, possibly with slight variations). One of the goals of using a preprocessor revolves heavily on the use of variables throughout the stylesheet so that you can easily change a single line and have it propagate through the entire file. You can see where this can be a waste of your time. Using variables takes that away:

$linkColor1: #FFA500; /* Orange */

 

#menu ul li a { color: $linkColor1; }

.wrapper { color: $linkColor1; }

.niceLink  { color: $linkColor1; }

Which will compile into:

#menu ul li a { color: #FFA500; }

.wrapper { color: #FFA500; }

.niceLink { color: #FFA500; }
This is a very limited look at what SASS can do, so for a better look, check out the official documentation, and be sure to try it out for yourself!