The Power of Preprocessors (Sass)

CSS preprocessors are really strong tools to make cleaner and maintainable code. Dealing with thousands of lines of CSS, make you waste a lot of time, redundant code and difficulties in structuring the code.

Preprocessors help us to deal with these things and it has some advantages over CSS.

What is a CSS Preprocessor?

A scripting language that extends CSS and gets compiled into regular CSS syntax.

Why use one?

Cleaner code with reusable pieces

More flexibility to do things on the fly

Shareable snippets and libraries

Easily produce CSS that works across browsers

There is more than one preprocessor like Sass, Less and Stylus. Here I’m going to explaining the benefits of Sass

What is Sass?

Sass is one of the most used CSS preprocessors. It has various features to help you to write better and cleaner CSS code. You can check for details in Sass website

Installing Sass

Sass is created in Ruby, so we must first have it installed in our operating system.

Mac OS X

For Mac, it is very simple because it already comes with the Ruby interpreter installed. We just have to open a terminal window (terminal.app)

Install the stable ruby gem:

# Command line
$ sudo gem install compass

Windows

We must first install Ruby. You can find it here https://rubyinstaller.org/downloads/

You can check your version or ruby writing:

# Command line
$ ruby -v

Afterward, you open a Windows command mode window in administrator mode to install the gem.

# Command Line
$ gem install sass

If you want to check the version:

# Command Line
$ sass -v

Compile our files in CSS format

Our .scss and .sass file cannot be interpreted directly by the browser, so it has to be converted to the CSS extension. We can use different forms:

We have different programs and extensions that we can install in our OS:

Windows & Mac:

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Visual Studio extension:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Also, we can use the command line with a syntax like this:

# Command Line
$ sass --watch filename.scss:filename.css

Features

Variables

You can declare variables to use them next in your sass file like this:

@import and modularize

Sass has a very useful directive that allows other files to be incorporated in the style sheet, as could be done by creating and importing a file in which all the variables are defined (for example, all the color values that are needed). The information of the imported file is used as if it were part of the source code. This maintains clarity in style sheets. With @import any number of files can be imported, even from subdirectories.

You can import several files and use the variables of the modules in one step:

Mixin

Mixins are Sass functions that group CSS declarations together. We can reuse them later like variables.

After creating the mixin, we can use it in any class with @ include command.

Nesting

Sass allows the CSS rules to be nested so that style sheets are more concise and easier to write. All selectors of higher levels are automatically prefixed to nested selectors. Example:

The previous Sass code is automatically converted into the following CSS code:

Conclusion

These are some of the most important features of Sass, which help us to write more clean and readable CSS code. I hope this article has given you an understanding of SCSS/SASS. If you have any questions, post them in the comments.