Sass lets you code CSS stylesheets the way you would write other software.

I just got done with a huge client project that relied heavily on Syntactically Awesome Stylesheets (Sass), the CSS preprocessor.

Sass, which we’ve written about a few times, lets you code CSS stylesheets the way you would write other software, using functions, variables, inheritance, and other programming principles that make flexible, extensible, DRY CSS styling a possibility. Sass code compiles to clean CSS for use on your site.

About halfway through the project, I realized that I was happier and more confident writing Sass than I’d felt in quite a while banging around JavaScript and PHP. (And markedly more so than when I tried to write my first Android app in Java, which felt like taking daylong trips to a cosmic dungeon overseen by the malicious God of Small Details, whose cruel visage and booming laughter are terrible to behold.)

In fact, I started to realize that I wish I’d learned to program in Sass, rather than following the Java-JavaScript-PHP route dictated by my computer science classes and career. I think Sass could be a great introduction to programming principles for at least some aspiring programmers. Here are some reasons why:

Has the basics

Sass has variables, functions with arguments and return values, conditionals, loops, nesting, and inheritance—plenty to get you started. The learning curve to become a competent Sass programmer could take you from zero understanding of programming to a good feel for most of the basic principles.

Builds on existing knowledge

Sass evolves logically from CSS.

Sass brings the power of programming to CSS. Put differently, it evolves logically from CSS, and diving into it makes the nature and usefulness of this evolution really clear. Basic PHP does the same thing for HTML, but JavaScript, Java, etc., start out super-abstracted, and don’t follow easily from any static markup language.

Little conceptual baggage

To understand what Sass compiles to, all you need to understand is CSS.

To learn JavaScript or PHP requires a fair amount of education about the HTML DOM, the server-side/client-side distinction, and the interaction between HTML markup and these languages. When you learn Java or a similar language, all you understand is the commands you’re giving; the inner workings of the runtime environment are a total mystery, which, in my experience, may not be the most confidence-building conceptual foundation.

The Sass compiler is opaque, but to understand what Sass compiles to, all you need to understand is CSS, which you can learn in basic form in an afternoon—and which you absolutely ought to know anyway. There’s nothing but what you write (Sass) and what it turns into (CSS).

Simple and declarative

When you program in Sass, you’re doing simple, high-level things.

CSS can be quirky, but most of the time you’re trying to perform concrete, well-understood tasks: for example, to put a border around a picture, just like you would in your house. Not only that, CSS is high-level and declarative: you simply say “border: 2px black solid” and CSS handles the rest, with no need to specify a bunch of x- and y-coordinate values or anything else.

As a result, when you program in Sass, you’re doing simple, high-level things—perfect for learning the ins and outs of programming itself, like the basics of control flow.

To pick a really obvious contrast, Java for Android is both extremely abstract and mercilessly imperative. You spend most of your time figuring out how to give extremely abstract objects equally abstract properties before you can even begin to work with them. The first introductory Android tutorial code I found in a Google search walks you through using “RenderScript intrinsics,” and covers how to “extend RadioButton with StateListDrawable.” Sounds fun!

Visible results

Sass code is inherently visual.

I imagine that anyone who’s starting out in programming would like to see the results of his or her work. Sass code is inherently visual, since CSS controls little else except the visual presentation of a page’s contents. When you turn something red with Sass only when its background is white, or set it to a serif or sans-serif font depending on a variable $serif, you can really see the results.

Furthermore, you can view the exact runtime output of your Sass code as a CSS file, and explore it using a browser explorer (or a hack I’ve described earlier).

Contrast this with, say, a JavaScript-based online stopwatch. The stopwatch may have a visible result, but both the runtime environment and the precise functioning of the stopwatch are opaque and non-visual in nature.

In Sass, messed-up code will cause things to look funny. In other languages, what you’ll see is anyone’s guess.

This is probably especially salient when your code is messed up. In Sass, the messed-up bits will cause the corresponding HTML elements to look funny. In other languages, what you’ll see is anyone’s guess—if you see anything at all. I remember staying up all night trying to write a simple Java program that recursively displayed nested triangles. It looked like absolutely nothing until it finally worked perfectly, at which point it looked like a bunch of nested triangles. Not a lot of help there.

In conclusion…

Am I recommending that all Programming 101 classes start out with Sass? Probably not: it’s a little too lightweight and specialized to be what serious future programmers cut their teeth on. But if you’ve got a little bit of HTML and CSS knowledge but are generally afraid of “programming” itself—particularly if you’ve got a visual/front-end orientation—then Sass may be a great place to start. All you’ll need is a more savvy friend to set up the Ruby compiler…

What do you think? Should folks start with Sass? We’d love to hear from you in the comments below!

Image Credits: Stringer Java Obfuscator