As the web grows and changes, new technologies arise to help the developers on their interesting journey in bringing life to ideas and designs. This is how CSS was initially born and how CSS preprocessing technologies such as SASS came into being. In this post we will explore some of what SASS has to offer. We will take a look at new useful functionalities and techniques which lead to more modular, reusable, and maintainable code. If this sounds good, let’s begin..

SASS stands for “Syntactically Awesome Style Sheets.” As the name states it adds additional syntax and also offers additional functionality.

Let’s explore what SASS has to offer with examples keeping in mind that this is simply an overview and that when you develop, you will need to make decisions as to when to apply which of the features listed.

Before we start, it’s good to mention that SASS initially had a different syntax, which did not resemble CSS. Imagine CSS without curly braces. In its recent versions, SCSS syntax was introduced which is now very much in line with the CSS syntax. So when you are seeing SCSS, it is SASS in its new syntax.

Variables

SASS adds the capability of defining and using variables within your stylesheet. There are 7 data types: numbers, strings, colors, booleans, nulls, lists and maps. For a more detailed overview please look at this here (https://sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types) but for now this is a simple example:

Play with this gist on SassMeister.

As you can see $font-size, $line-height, and $h1-size are number variables and size for H1 is defined by setting it to the value of $h1-size. You can also have variables of other types as below:

Play with this gist on SassMeister.



So now defining and changing a theme of a site can be as simple as changing a few variables.

There are a few ways to implement Object Oriented Design Patterns using SASS such as Mixins, extends and nesting. As developers know, this leads to greater modularity and more reusable code.

Mixins

In its essence, a mixin is a form of a constructor, which combines a set of defined CSS properties and allows you to reuse it in other places. It can also be viewed as a function which sets certain properties, adds others and returns the result.

Example:

Custom FieldsPlay with this gist on SassMeister.

In the example above we are defining a square mixin and are using it in two places. Another way to use mixins is for cross browser properties:

Play with this gist on SassMeister.

Extends

This is also a way to implement OO design where a particular selector can inherit properties of another. Keep in mind that we are only defining and inheriting properties and if you are coming from the object-oriented world, this is a limited implementation. For example:

Play with this gist on SassMeister.

As you can see two different buttons “confirm” and “cancel” are defined in a way, where most properties are common and are defined only once in the final CSS.

Nesting

Nesting is a third way which allows sharing of properties between selectors. Here you are defining one selector inside another which can also define a selector inside it and so on:

Play with this gist on SassMeister.

Here the nesting is only two levels deep. When developers discover this feature, they are tempted to nest too many layers as it makes coding simpler for them. You do need to keep in mind of the way it will be rendered into CSS which can become complicated. Best practice for nesting is to keep it no deeper than 3 or 4 levels.

Additional functionality

There are many more features to explore but to go over them in detail will take too long. We will describe them below and you, the reader can explore them with your google muscles.. :)

Operations

Addition, subtraction, multiplication, division, modulus, equals and non-equals can all be done straight inside the CSS file.

Functions

There are two types of functions available in SASS.

Pre-defined functions: SASS includes many functions for various things including string, color manipulations and math related methods like random() and round(). I would strongly recommend you explore these and use them as needed. You can find the full list here: https://sass-lang.com/documentation/Sass/Script/Functions.html Custom functions: You can also define your own functions to do what you would like: https://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives

Conditionals

@if, @else are conditional statements which allow you to add logic to your CSS and perform an action based on a condition. For more information check: https://sass-lang.com/documentation/file.SASS_REFERENCE.html#_9

Loops

There are also loops such as @for, @each and @while. These allow you to iterate through a list or a map and do some task as you would in other programming languages. For details check: https://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10

Partials

Partials allow you to separate your CSS files into smaller files and organize them in a logical and easy to maintain way. For example:

Play with this gist on SassMeister.

Play with this gist on SassMeister.

(the last example with partial does not look good as it requires the partial file for imports. I would leave this one as an image)

Beyond SASS

Compass – compass is an extension of SASS which bring a number of additional features including cross-browser mixins and so on. (https://compass-style.org/) This is out of the scope of this article, but if you are thinking of using SASS you need to look into Compass as an addition and extension to SASS.

Compilation – We have to mention that SASS is a preprocessor for CSS and does need to be compiled into CSS before being ready to be sent to the browser. This adds an additional step in your site creation process. There are a number of tools that help you do this:

Sassmeister – For development you can use this convenient in-browser tool: https://www.sassmeister.com

Command line tools – You can also find Apps and command line tools here: https://sass-lang.com/install

Also let’s take a look at an example using maps which combines a few things together:

Play with this gist on SassMeister.

Note that here we are combining three things. First of all we are using maps, (i.e. key, value pairs). This is one of the data types at your disposal. Then we are using an @each loop to iterate through the map items and for each we are creating a corresponding class. Notice the special #{…} syntax. It allows for the value of a variable to be part of the name of the class – a very useful feature.

The CSS is above in the example.

To summarize, a preprocessor like SASS, brings additional flexibility and functionality, which can lead to cleaner and more manageable code in the long run. It can allow you to code in a more reusable and intuitive way. But for this you are adding an additional “CSS compilation” step to your build process. This being said, if you are working on a mid to large-scale project what SASS offer well outweighs the additional work.

In addition, the modular approach to CSS coding which SASS brings works really well with Front-End JavaScript frameworks like Angular.js, React.js, Ember.js, etc. so if your project uses any of the MV* JavaScript frameworks, you are better off using SASS.