The greatest challenge for most developers to learning Sass isn’t the concept of preprocessors, or the language itself, but the hoops that must be jumped through to get it up and running. Those comfortable with the command line can get things going fairly easily, and tools like CodeKit help immensely, but that still leaves many designer-developers who might otherwise become Sass aficionados intimidated by change, wary of paying for a new tool, or simply overwhelmed at the prospect of changing their entire workflow.

For those interested in learning Sass, I’d suggest taking a route that entirely avoids any up-front investment, has no long-term commitment, and demands very little time: CodePen. That way, you can start coding Sass in just three simple steps:

1. Go to CodePen.io
2. Click on New Pen in the top left
3. On the screen that appears, click on the gear icon next to CSS and choose Sass (.scss) in the new window. Click again on the same icon (or anywhere else on the screen) to close the window.

That’s it: you’re now ready to start coding with Sass.

Easy Does It

The first thing to realize is that, as a preprocessor, Sass supports everything that’s possible in CSS. In fact, you could write only vanilla CSS in a Sass file and everything would come out perfectly okay. Let’s prove that: type the following into the CodePen CSS panel:

body { background: goldenrod; }

You should see the preview pane light up with a new background: no new syntax required. Bottom line: you only need ever take on the Sass that you’re willing to use. Don’t know how to accomplish something in Sass? That’s fine: do it in CSS, right in the same stylesheet. You don’t need to learn an entire syntax all at once.

In this article, we’ll start by using just one standout Sass feature.

Bright Lines: Colors & Variables

As a web development project grows, things get forgotten. Sometimes you can avoid having to dredge up the past by using CSS inheritance; having a strong, authoritative site style guide also helps. But sometimes there’s no way to avoid the question of “what was that color again?” And we all know the results: redundant declarations scattered throughout the stylesheet, or, even worse, best guesses at the color.

If preprocessors had to justify their existence on one sole feature, it would be variables. CSS variables are coming to the standard W3C specification, but it will be years before they can be used in production. With a CSS preprocessor, you can use variables now, the Sass way.

We’ll need some content on the page to see this effect. Click in the HTML tab and type the following:

<h1>Burdensome Burliness</h1>

Then at the top of the CodePen CSS window, type the following:

$primtext: #333;

And adjust the CSS immediately below it to:

body { background: goldenrod; color: $primtext; }

You’ll see that the text is dark grey. Adjust the value of the variable, and the color of the text will change accordingly. This will remain true no matter how often you reference the $primtext variable throughout your code. Centralizing colors – or any other value – into Sass variables makes on-the-fly design changes very easy.

Using What You’ve Got

That’s great in theory, but can we actually use what we’ve made? The answer is yes: CodePen is great for prototyping, and exporting our work will allow us to see the typical structure of a Sass project. To do so, click on the Save button, then Share. In the window that appears, choose Export .zip. Download and uncompress the .zip file; the result will look something like the screenshot below:

You can see that the .scss file is in a folder; it may even be associated with an editor you already own. The final CSS stylesheet is also in a folder, which may be new to you: because the CSS is generated from any changes to the Sass file, a folder structure usually works best to contain it. The index page is linked to this CSS file, just like normal.

The result is the typical structure of a simple Sass-driven project, with the final “build” of the site stylesheet contained in a single folder.

That’s the very basics of using Sass. While I’ll have a lot more to say about colors and variables, we’ll turn to looking at another killer Sass feature in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.