Overview of CSS Preprocessing

Even though CSS is an integral part of website development, we are limited by its conventions of selectors and properties. Preprocessors are programs that offer the variables missing in CSS. Preprocessors were created to organize CSS via nested definitions, making your code easier to maintain. Preprocessors extend CSS with variables, operators, interpolations, functions, mixins, and many other usable assets.

Essentially, a preprocessor takes code that you’ve written in the preprocessed language and converts it into simple CSS code. The preprocessor is comprised of a language, the code that you write, and a compiler that converts the code into standard CSS which is easily read and processed by any web browser.

Even though preprocessors have different syntax, they all support a CSS output. More importantly, the resulting CSS file that preprocessors produce functions as regular CSS, so there is no incompatibility with your program.

Two of the more popular CSS preprocessors are Sass (Syntactically Awesome Stylesheets SASS ) and Less (Leaner CSS).

Two of the more popular CSS preprocessors are Sass (Syntactically Awesome Stylesheets SASS ) and Less (Leaner CSS). These two are very similar overall accomplishing the same things with a different syntax. Sass has two different syntaxes, the older syntax is referred to as just Sass is shorter easier to type syntax making it very clean. Sass does not use semicolons, and brackets, but opts for indentation of line to group a block.

This syntax has widely been replaced with a newer syntax known as SCSS (Sassy CSS). This syntax allows the power of Sass but is a superset of CSS3, it is totally CSS compliant. So you can write plain CSS and run it through the SCSS preprocessor without errors. Because SCSS is compliment with CSS it is very easy to pick it up and run with it. You do not need to know Sass to create SCSS.

The following sections present more information on variables, nesting, and mixins.

Variables

CSS presents its functionality in a straightforward and easy-to-learn syntax. However, that straightforward accessibility also limits its functionality. Because of the complexity of web design, you need to be able to employ shortcuts that increase efficiency and save you time. This is where variables prove useful, since they label and store data in memory.

Some examples of variables include: color, width, font-size, font-family, and borders.

This variable can be used anywhere in the entire SCSS file.

Nesting

What is selector nesting?

Selector nesting is a feature of CSS preprocessors, allowing authors to nest selectors within selectors in order to create shortcuts.

If you have structured your website’s CSS well, you may not need to use many class or ID selectors. Instead, you can apply nesting, which allows you to specify properties to selectors within other selectors. CSS lacks visual hierarchy when working with child selectors, which you use to match elements that are the direct children of other elements. Because of this, you have to write selectors and their combinations in separate lines.

Nesting provides a visual hierarchy to your code, similar to HTML, and increases its readability.

For Instance

After compiling this SCSS code into CSS, our CSS file should look like this.

Mixins

You define a mixin as a CSS rule set; it allows you to define common properties once, and then reuse them throughout the rest of your CSS. Specifically, mixins are a set of definitions that compile according to some parameters or static rules that you set.

Creating a Mixin is very simple, all we have to do is use @mixin command followed by a space and our Mixin name, then we open and close our curly brackets.

Now we can add our flex declaration and use the Mixin anywhere in our code.

To use a Mixin, we simply use @include followed by the name of the Mixin and a semi-colon.

After compiling this SCSS code into CSS, our CSS file should look like this.

Another Example

After compiling this SCSS code into CSS, our CSS file should look like this.

Sass Vs Scss

Sass (Syntactically Awesome Stylesheets) and SCSS (Sassy CSS) are both preprocessing languages that are compiled to CSS, but they use different technical syntaxes.

Sass uses CSS-compatible, indented syntax to provide customized, well-formatted output. It uses indentation rather than brackets to indicate nesting of selectors, and new lines rather than semicolons to separate properties. Sass employs language extensions such as variables, nested rules, and mixins.

Sass contains useful functions for manipulating colors and other values on your web page. Files using this syntax have the .Sass extension.

SCSS followed the development of Sass; SCSS offers a more flexible syntax, including the ability to write basic CSS. SCSS is an extension of the CSS syntax; therefore, every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .SCSS extension.

After compiling this SCSS code into CSS, our CSS file should look like this.

There are many ways to manage and process your .scss files, the traditional way is to install and use Sass at the command-line.

Less(stylesheet language)

Just like Sass, Less is a CSS preprocessor and it allows web developers to build modular, scalable, and more manageable CSS styles. Remember that preprocessors extend the CSS language and add features that allow variables, mixins, and other functions that enable you to easily maintain CSS.

Less is written in JavaScript so it runs inside NodeJS, in the browser, and inside Rhino. There are also many third-party tools that allow you to compile your files in Less and watch for changes.

Some Basic Syntax Differences from Sass

Remember that both Sass and Less can utilize variables to seclude values. Less uses the @ symbol while Sass uses the $ dollar sign to declare a variable, as seen in the following.

Here is a sample of Less code:

After compiling this Less code into CSS, our CSS file should look like this.

As a professional web developer you get to pick the one you like best and know that you will come across and have to work with both.

Sass contains many features that you can use to extend its functionality. In addition to being convenient, these features save you time and increase your efficiency as you are designing your website.

Summary

Sass and Less can help you organize, reuse, and decouple your CSS, ultimately saving you time and effort; remember to apply these features to your development workflow.

Note: If you want to try Sass or SCSS and watch it change into CSS, go to [http://www.sassmeister.com/].