What Are CSS Preprocessors And How To Use Them?

What are CSS Preprocessors And How to use them

One morning in the office, I had a look at the computer screen of one of my colleagues Jitendra Thakur while shaking hands with him. He was reading about a very funny word “SASS”. Why funny?? Because SASS is generally tends to “Mother in Law” in India :P but here it has a technical meaning and that’s “CSS Preprocessor”. Jitendra asked me to share something about CSS Preprocessors and literally,  I didn’t know a anything about them. But finally I decided to write some informative about CSS Preprocessors to make both Jitendra and my readers understand. Before we move further, we have a quick look at CSS first.

What Are CSS Preprocessors And How To Use Them?

Weakness of CSS:

Although CSS is the beauty of any web application and the web designers are beauty parlor men that work very hard and spend much time in writing a lot of CSS files each day. But have they thought about the weakness of this web beauty ever? Listed in the following.

1. Designers have to write thousands of lines of code because CSS doesn’t allow them to reuse the rules of an element for multiple selectors.

2. CSS has its own feature set that doesn’t offer to use variables, conditional statements (If Else), loops as other programming languages do.

3. Hard to manage or import multiple files in one single CSS.

To overcome these limitations, a new concept of CSS Preprocessors was introduced in recent years and the web designers love them and very happy to adopt this exciting concept in their project.

What are CSS Preprocessors?

Stop once! If you are a beginner and still learning CSS, this tutorial is not for you. Gain an expertise in CSS first by playing with it for a long time and then come back here. This post is only for the people who are able to write a clean CSS code fast and efficiently.

CSS Preprocessor is just like a tool or software that offers a very advance CSS coding.  This advanced CSS is written in a preprocessed language (eg. SASS, LESS or STYLUS) and then complied by the tool (depends on which CSS Preprocessor are you using) and outputs a normal old style CSS file. These tools allow the designers to adopt more programming concepts in their design and let them feel become a developer too. There are three most popular CSS Preprocessors (SASS, LESS and STYLUS) have been borned that have made a very good place in the world of web designing.

Which Preprocessors Should You Use?

It depends on a lot of factors that which CSS preprocessor you should adopt in your theme because all of them have their own syntax, advantages, disadvantages and flexibility of writing the code. As I read the reviews and according to my research,” LESS “has been loved a lot by people because it is written in JavaScript and you all are familiar with JavaScript (You use it daily with jquery) in some manners.

How to start with a preprocessor?

Getting started with a CSS preprocessor is very straight forward. What you need to setup and start with a preprocessor is elaborated below:

1. Choose a suitable preprocessor (SASS, LESS and STYLUS are most popular and many others are also available).

2. Install the respected compiler either in your computer or production server (I’ll explain how many ways the preprocessors can be used).

3. Start writing the advanced CSS files in the preprocessed language (.sass, .less or .styl) using a suitable editor like eclipse etc.

4. Compile it with the installed preprocessor and get a neat and clean CSS file.

Popular CSS Preprocessors:

1. SASS (Need to installed Rubi first)

2. LESS ( A javascript framework Node.js should be installed )

3. Stylus (Can be installed as Node.js package)

How to write a CSS preprocessed code?

To write a preprocessed code for SASS, LESS or STYLUS you’ll need a code editor. Although any programming code can be written in even notepad but the programmers want a good editor that can highlight the syntaxes of used language. You can use eclipse (the popular code editor has syntax highlighter plug-in for most of the programming languages).  Learn and understand the syntaxes of preprocessors you are using by their documentations and start writing your code.

Compile Code With Installed Preprocessor:

After writing the preprocessed code, provide it to the compiler (wherever you installed it), let it process the code and get the old traditional CSS file that you have been writing for years. Compilation can be done in two basic ways and depends on which you love the most.

1. Compilation On Local System: This approach has an idea to write SASS, LESS or STYLUS code on your local PC (It may be windows, linux or MAC) , run the compiler installed in the same machine that converts it to standard CSS code and use these CSS files in your theme or application. You can compile the preprocessed files both manually or automatically. You get the command line compiler by default when install the preprocessor. But if you are not so technical and don’t know using command prompt, there are many GUI compilers available on internet like Codekit or Less.app.  This approach is for non-programmers and I’d also prefer it for easy and fast compilation.

2. Client Side Compilation: An another approach is to compile to SASS or LESS code on your clients machine. Nothing has to be done in this process. Just put the SASS, LESS or STYLUS file on the server and include a javascript compiler  that converts your code to CSS files internally but you can think that how it can be so slow process as it compiles the code at page rendering time and makes a lot of load on the client’s browser.

So I think you have got a basic idea about CSS Processors and go through the following links to know about individuals.

1. Getting Started with Sass: Installation and the Basics

2. LESS CSS – Beginner’s Guide

3. Getting Started With Stylus

All the above are most popular CSS Preprocessors being used widely now a days.