Introduction to CSS Preprocessors


Preprocessor is simply a converter, which converts one form of data into another form. In web programming, there are many languages like HTML, CSS, JavaScript, Ruby, etc. which uses the preprocessors for simplify codes. Haml, and Sass are the two main examples; Haml for HTML, and SASS for CSS.

After the inclusion of Cascading Style Sheets (CSS) in the web technology, development work process became less. CSS gives not only support for HTML in styling, but also boost the speed of developing. However, CSS has many limitations and rules regarding existing styles and files. These rules are not easy to understand, particularly if you are coding every day with the same project, and you have to write a new style for every other day. It means, you are over riding the existing CSS, and you do not know which style effects would work, and which wouldn’t.

These limitations was hunting web programmers, because it doesn’t only hard to remember all the rules of CSS, but also wasting so much time to organizing the code in structured manner. Therefore, CSS preprocessors came to make code more easy and clean.  It is a great advancement in CSS technology, which impresses CSS coders.

What a CSS Preprocessor is?

CSS preprocessor is actually like a function, which takes CSS text code file, and after processing it, produces a new clean, and precise piece of CSS code.

There are many CSS preprocessors available, but mostly usedCSS preprocessors are Less, Sass, and Stylus. Following are the details and important considerations about these CSS preprocessors.

SASS CSS Preprocessor

SASS or (Syntactically Awesome Style sheets), is a CSS preprocessor, which works like a bridge in between your CSS file and browser to produce more effective, clean and dry code.

As we know a simple CSS files cannot give you super functionality like mixins, variable, functions, and classes to work more efficiently. SASS CSS preprocessor gives us more control, clean, and manageable style sheets. If someone is working on Ruby platform SASS preprocessor is the best choice.

Following is simple example, how SASS works like mixin.

SASS CSS Preprocessors

SASS actuallycompiles the syntax into regular files of CSS by command line editor or any third party plugin.

Moreover, SASS has extension for CSS3 as well, called SCSS (SASSy CSS). Any valid document of CSS3 is also a valid SCSS document. SASS syntax is easy to understand, and someone can use it throughout the program. Additionally, it is very easy to convert an existing style sheet from CSS to SCSS, due to its extensibility and reliability.

How to install SASS CSS preprocessor:

As we know SASS is compiled via, Ruby, so Ruby is must be on the PC to compile and produce clean CSS files. Procedure of installing of SASS is as:

  • After the installation of Ruby type following command to compile SASS file
  • Command: gem install sass
  • Files written in SASS saved with .sass extension. For conversion of this file into CSS file following command is used
  • Command: sass styles.sass styles.css
  • This command takes styles.sass SASS file and produces styles.css file. Keep in mind directory should be the same for both files.

How to convert SCSS to SASS and SASS to SCSS:

It is possible to convert SASS file to SCSS and SCSS file to SASS. See following commands for explanation:

How to convert SCSS to SASS and SASS to SCSS

Features of SASS CSS preprocessor

Following are the key features of SASS CSS preprocessor:

  • Support for variables.
  • Support for mixins.
  • Support for color transformation.
  • Support for nesting, loops, and conditions.
  • Support for importing external files as well.
  • More powerful than Less with @content, @media, and @extend support, to provide retina images, and media helpers.
  • Compass in every CSS3, which provides more features like typography styles, CSS sprites, and cross browser compatibility.

LessCSS Preprocessor:

Less is little different with SASS CSS preprocessor, which adds features like variables, functions, mixins, and several other techniques, which adds preciseness and extensibility in the CSS code.

Less preprocessor works on node, although there are some other 3rd party tools available where Less files can be compiled. Check out the following code example for more detail.

LessCSS Preprocessor

LessCSS Preprocessor

How to install Less CSS preprocessor:

For installing Less CSS preprocessor, do following steps.

  • Download the node.js manager from internet into your computer.
  • Type the following command to install
  • Command: $ npm install -g less
  • After the installatation, someone can call the compiler by typing following command:
  • Command:$ lessc styles.less
  • Itwill produced O/P CSS to Stdout. And might be return back like following
  • $ lessc styles.less > styles.css

For clean output just add -x. the Clean CSS can also be produced by using clean-css option.

For complete list of command, run lessc without parameters. It will show all commands on the same page.

How to use Less in Code

Somebody can invoke the compiler via the node, by following method:

How to use Less in Code

Someone can also manually do like this.

Less configuration

To configure and compile, pass some parameters to compiler like the following:

Less configuration

Features of Less CSS preprocessor

Following are the key features of less CSS preprocessor:

  • Every class behaves like mixins.
  • Support for namespaces.
  • Scoped variables inclusion.
  • Support for color transformation.
  • Provides client side processing.
  • Support for nesting, loops, and conditions.
  • Support for importing external files and libraries as well.

StylusCSS Preprocessor

If someone is working on Node platform, stylus is the best choice. It is another type of CSS preprocessors to produce dynamic, expressive and clean code. It also includes many algorithms to add different features into you existing CSS code.

How to install stylus CSS preprocessor

Once you have node.js installed into your pc. Installing this preprocessor is also very easy by using following command:

Command: $ npm install stylus

Following is the example code to explain a transparent mixin.

How to install stylus CSS preprocessor

Features of Stylus CSS preprocessor:

Following are the key features of less CSS preprocessor:

  • Powerful but complex syntax.
  • Optional colons, semi-colons, commas, and braces support.
  • Provides more language featuers.
  • Support for keyframes via @keyframe.
  • Complex conditions like unless/else.
  • JavaScriptpowerful API supported.
  • CSS3 helpers like border-radius and gradients.
  • Mixins for common CSS.
  • Closer to programming rather than CSS friendly.

About the author:
Haris is a newbie in technical writing, and this  is his first post on Designzzz. Please do give your feedback and guide him for his future articles.

Credits for research and images:

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved