Got SASS?

Written by | February 10, 2014 | Posted in Process

Since I started working at Cuberis as a web developer, I’ve learned some amazing new development technologies. My favorite so far is SASS! In this post, I’ll explain what SASS is and why it’s great.

To start, let’s talk a bit about CSS. CSS stands for Cascading Style Sheet. A CSS file is simply a list of rules for how a browser should display HTML elements on a web page. CSS rules need to be written in correct syntax. See some example rules below:

form {
 width: 400px;
}

form textarea {
 background-color: orange;
 border: 3px solid black;
 font-family: Arial, sans-serif;
}

CSS rules consist of selectors, properties, and values. The selectors (“form” and “form textarea”) tell the browser which HTML elements to apply a rule or rules to. (Note: “form textarea” means “textarea elements that are inside form elements”.) A property is an aspect of the element that is to be controlled. The properties above are “width” (applied to forms), “background-color”, “border”, and “font-family” (applied to form textareas). And, lastly, values specify how a particular property should appear in particular elements. For instance, the value of form textarea’s “background-color” is “orange”, so form textareas on pages that include this CSS will have an orange background color.

Pretty cool, huh? The problem is that when it comes to coding beautiful designs, we love rules, so our stylesheets become enormous. This makes them difficult to navigate and maintain. In swoops SASS to the rescue.

SASS stands for Syntactically Awesome Stylesheets. It’s a special language that makes it easier to create and maintain stylesheets. It does so by enabling various kinds of high-level programming functionality, including variable declaration, mixins (analagous to functions), inheritance/extension, nesting, importing, and other tools that lessen the amount of redundancy in code. See below for some example SASS that would generate the same output as the CSS above.

$bodyFont: Arial, sans-serif;

form{
 width: 400px;

 textarea{
  background-color: orange;
  border: 3px solid black;
  font-family: $bodyFont;
 }
}

In this code, there are examples of variables and nesting. The variable $bodyFont is declared at the top and is accessible to any rule in the file. (SASS variables always begin with $.) Once your file becomes extremely long, you can change the body font easily because its value is listed in one place rather than repeated everywhere there’s a font-family property. You can see nesting in the code above as well. Because the textarea selector is nested within the form selector, this SASS code will output CSS with the selector “form textarea”. This nesting functionality eliminates a degree of redundancy, and the accompanying indentation makes it easier to locate a selector later on when you’re going back into the file for edits.

One final important detail about SASS is that in order to use it, one needs a compiler. Browsers don’t understand SASS, but they do understand CSS. A SASS compiler takes in a SASS file and outputs a CSS file that can be used on a website. At Cuberis, our favorite compiler is the Ruby-based Compass because it contains useful CSS mixins (which you can browse here).

Alright, everyone. Go out and get SASSy!