The Importance of SASS

The Importance of SASS

So far in my time as a web developer I have found that having good etiquette makes a huge difference when you are coding and styling a page. Indenting and commenting are easy rules to follow when you are coding you html, but when writing your styles in CSS it might get a little confusing and a little messy. There is a simple solution to having a clean and organized styling and that solution is SASS.

SASS is a preprocessed form of CSS that is put through a compiler, like Prepros, and outputted as a CSS file.

A SASS file that looks like this:

SASS Styling

Will look like this after being outputted:

CSS Output from Prepos

Notice in the SASS file everything that needed to be styled in the section of HTML is contained within the one section of styling. This allows any user to follow what is styled and where it is styled, making it easier to make change and add properties to the selectors in your code.

Using properties like @import will help keep attributes like ‘normalize’, ‘clearfix’ and ‘box-sizing’ to a single line rather than having a chunk of space dedicated to those attributes:


‘normalize’ contains this code:


Another property that can keep things clean is the @mixin property, that can be applied to any selector by a simple @include selector as shown below:

@mixin uses

All these tools help create nice clean and organized code. SASS also helps keep your code DRY, makes styling that much easier, and a little faster as well. SASS is something that will benefit all current and future web developers.