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.
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.
Little conceptual baggage
To understand what Sass compiles to, all you need to understand is CSS.
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!
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.
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.
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