There was a time in which the gallant workers in the world of the web had to face CSS style sheets that included thousands and thousands of lines of code, drowned by despair and fearful of substantial design changes, can you imagine!? Then, however, came the light at the end of the tunnel…a light in the shape of the pre-processors, lending themselves to help provide clarity, order and concision. This is the story of Sass (Syntactically Awesome Style Sheets), a pre-processor designed by Hampton Catlin and developed by Nathan Weizenbaum that, as shown by its initials and its pink neon logo, somehow manages to convert stylesheet coding into a fun and stimulating activity, who knew?

So what does our company get out of investing its precious time and dedication into this practice and what can it add to our projects? First of all, you can save a massive amount of code if its used correctly, as well as offering a clean and tidy document in which maintenance doesn’t become our own personal hell. And what about other pre-processors? Well, it offers a very intuitive syntax that is also easy to learn and understand.

To get started, we will only need Node and a couple of commands. We install it with npm install -g sass and then use command sass –watch input.scss output.css –style compressed / nested / expanded / compact, in which, basically, we are indicating with – watch that we want Sass to monitor the compiling when there is a change in the scss (this is the extension of the Sass files) and then we indicate the scss file to be compiled and the name or file that we want the compiled css to receive. Finally, with the flag –style we choose the way in which the css will be compiled, the compressed option for the minified css.

So why are we so sure that Sass is the essential work companion?

Variables

Does the client want a new look for their company and you find that you have thousands of colour references you no longer use and need to change them one by one? Never again! Save time with a variable and use the variables name when you want to use a specific value. When it needs to be modified, you will only have to change the line and Sass will take care of the rest! To create a variable, we just give it a name followed by the dollar symbol. For example:

$ corporateColor: # cc0033;

Nesting

To limit style properties to an element, you used to have to draw on the designation of all their predecessors one by one so that just like in any large family for example, one could easily end up losing themselves in such an ancestral maze. Sass allows you to create authentic family trees of elements in which you can clearly see and identify relationships, making their maintenance easier.

Parent_ Element {Properties … Element_child {Properties …}}

Maths and your style sheet

Sass supports multiple types of data and mathematical and logical operations among them, so it becomes a great ally when calculating dimensions of related elements, saving both time and neuronal expenditure. It is important here to highlight the interpolation (# {expression}), which will allow us to create element names from variables such as, for example, .box – # {$ i}, where $ i is a numeric variable.

width: # {(5 + 11) * 2} + ‘%’;

Programming elements

Undoubtedly, one of Sass’s strongest points is that it allows you to use programming techniques to preconfigure your CSS, being able to use loops with the directive @for or @while and conditional with @ if / @ else if / @ else. We also have the possibility to create our own functions with the directive @function and some special ‘functions’ that avoid code repetition called @mixin, which has greatly boosted the languages popularity due to its great power of reuse, creating users own mixins and uploading them for other users use and enjoyment. The mixins dont return any value like the @function, they only add custom code wherever we use them. We can add them using @include name_mixin (props).

All these features are just a small appetizer of the vast number of tools that Sass offers us. However, there are a few disadvantages we have to consider. For example, when you first get started, it takes a while to find out how to improve our code with the syntax, due to the number of possibilities. However, in the long run, it allows us to save a lot of time as we can reuse functions or mixins with different projects and as solutions to similar problems, etc.

If you are interested in knowing more, have a look at the official page where you will find a comprehensive section of documentation that is very easy to use, which includes both usage examples as well as CSS structures that create SCSS elements when compiling.

Written by: Tamara Redondo