All About that Sass

When it comes to simplicity in style sheets, CSS has always been the main choice for most developers. However, as our applications continue to grow in scale, become more complex, and target a wider variety of devices and screen sizes, this simplicity becomes a liability as CSS quickly buckles underneath all the weight. While proposals have been made to add more content to CSS, it would be a long time before all browsers are compatible with the new CSS.

This is where CSS preprocessors come in to play. A few years ago, developers Hampton Caitlin and Nathan Weizenbaum realized that while browsers weren’t necessarily ready for a new CSS, the two could design a new style sheet syntax made to handle increasingly complex CSS, then use a preprocessor (a program that runs on your computer or server) to translate this new syntax into the classic CSS syntax that all browsers can recognize (More on this process later). There are many CSS preprocessors out there, but today we will be talking about Sass (syntactically awesome style sheets) and its ability to use variables, nesting, and mixins. Sass looks incredibly similar to CSS but does not use curly braces or semi-colons and also uses indentation and nesting. It is also important to note here that Sass offers two distinct syntaxes — Sass and SCSS.

  • Sass (Syntactically Awesome Style Sheets) refers to the preprocessor and syntax as a whole. It takes on its own syntax (the indented syntax), and compiles to readable CSS. We refer to the overall language as Sass.
  • SCSS (Sassy CSS) falls under the Sass umbrella. It is a CSS syntax that’s been turbocharged with all the goodness of Sass. Valid CSS is also valid SCSS, so the transition is swift and painless, and you can learn as much as you want at any time to improve your skills.

SCSS is generally considered to be the newer and better approach and most typically code in SCSS so this guide will be primarily focused on SCSS syntax. Here’s a quick example of the differences between the three.

Why Sass?

When it comes to traditional CSS, the great thing is that if you know the basics of the language, you have the freedom to do a lot of great things with CSS. However, as applications become more complex, so do the CSS files and this freedom begins to become a liability as the files get out of control. Even in moderately sized projects, CSS files can become hard to maintain and it can slow down the workflow.

To combat these problems, Sass introduces variables, nesting, inheritance/extend, and mixins.

Variables

Variables in Sass work in a similar fashion to those in any programming language, including core principals of scope and data types. You can think of variables as a way to store and reuse information throughout your style sheet. Sass uses the $ symbol to make something a variable. Here's an example:

SCSS

CSS

Once the Sass is processed, it takes the variables we define for the $color and $color2 and outputs normal CSS with our variable values placed in the CSS (view right-most code snippet above). This can be extremely powerful, for example, when working with brand colors and keeping them consistent throughout a site.

Nesting

Sass allows you to nest your CSS selectors in a way that follows the same visual hierarchy of an HTML file. This can be both beautiful and dangerous, as it’s easy to get carried away with nesting, and end up with very long declarations that are hard to maintain and this is generally considered bad practice.

SCSS

CSS

Awesome, right? Moving on.

Inheritance/Extend

This is an extremely powerful feature of SCSS that permits sharing a set of CSS properties from one selector to another, allowing us to keep our code extremely DRY.

SCSS

The above code will allow you to take the CSS properties in %box and apply them to .greenBox. Then,.greenBoxBlueBackground will inherit %box properties as well by extending the.greenBoxproperty to.greenBoxBlueBackground. After the processing, you’ll end up with something like this:

CSS

Again, wow.

Mixins

Mixins are another great feature of Sass. They allow us to reuse whole blocks of code by creating our own functions and passing in variables. This is particularly useful for properties that need vendor prefixing. Sass uses the @mixin directive to define mixins, and the @include directive to use them.

SCSS

which will generate the following:

CSS

In Conclusion

This is just an introduction to Sass — there are many more features to discover. I recommend the official Sass documentation and to check out Compass in your further research and encourage you to consider using Sass in your next project and don’t forget to clap that Sass.