Why aren’t you using Sass?

CSS. Something that all experience web developers must master, and non web developers have familiarity with. It is infamous for being a hot topic of whether or not it’s a programming language (I’ll leave it up to you to decide whether or not it is!), but without it, we would have blank and very dull web pages. Without CSS, we would not even need UX designers.

… anyways, I’m rambling at this point.

We know what CSS is, aka cascading style sheets. It’s a tried and true styling language, and the basis of all additional styling frameworks that you may have used to style your application. Today’s topic is going to be Sass, aka Syntactically Awesome Stylesheet. It’s a CSS preprocessor that allows you to write code that gets compiled into CSS. However, it’s important to understand the basics of CSS before attempting to utilize any framework.

Sass is great because it allows you to use variables, nested rules, inline imports, functions, mixins, and more to further organize your style sheets. It is compatible with all versions of CSS, and has extensive documentation to make it easier for implementation. We won’t go over EVERYTHING in this article, but we are going to go over a few things that will hopefully win you over.

You have two syntax options with Sass:

• SCSS which uses the .scss file extension and complies with CSS syntax.
• Indented which uses the .sass file extension and indentation rather than brackets. It doesn’t comply like SCSS, but it is faster when written.

Variables:

Sass uses variables to assist in storing information, and this should be an easy concept to follow if you have experience with a programming language. Utilizing these variables makes it easier for you to reduce repetition in your code, and loads of other benefits, as well. Implementation is easy — you just set the variable with a name that begins with $. Here is an example of a Sass variable:

$font-family: font-family: ‘Space Mono’, monospace;
$primary-color: ##000000
div {
    font: $font-stack;
    color: $primary-color;
}

Scope:

Like CSS, you have global and local variables. If global, you can call that variable in multiple areas of your code (with caution, of course).

Nesting:

Nesting can be good or bad. While the purpose of Sass is to reduce repetitive code, it’s important to remember the hierarchy and CSS rules about what takes precedence. Take extra care when doing this to ensure the proper output. The proper way to do this would be to emulate HTML hierarchy.

Partials and Imports:

Think of partials like small code snippets that can be imported into other Sass files. Importing is a great feature of Sass because it allows you to be more organized with your code and it can be called wherever necessary. If creating a partial, this is the file syntax: _partial.css.

Speaking of imports… you can @import multiple partials into a larger CSS file. Instead of having one large CSS file for your entire application, you can have multiple smaller ones that are dedicated to one portion of your codebase. However, something to remember is that each import you make is generated as an HTTP request, so be mindful when creating.