What are CSS Preprocessors?

by admin

---

Posted on 08/17/17 5:32 AM

---

---

Having prior mastery over CSS, it probably becomes easy to use its preprocessors, namely – Sass, Less & Stylus.

Let’s segregrate our learning of CSS Preprocessors into the following:

** CSS

** Preprocessors

** CSS Preprocessors

** Sass

** Less

What is Css? Refering to Cascading style sheets, describes how Html elements should be displayed on all screen devices.

All in all, Css describes layouts, positioning, width, height and alignment of webpages. It saves lot of work with its ability to write once and run anywhere. For more on Css, check out my previous post –

What is Preprocessor? It is a kind of program which takes one type of data and converts down it to another type of data. For instance, Haml is processed into Html and Sass is processed into Css.

Now, let’s get down to What are Css preprocessors? It is a scripting language which extends Css and then compiles down it to regular Css.

Using Css became quite complex and repetitive for accomplishing little tasks such as closing tags, so, that is where css preprocessors comes into picture. As developer wanted more options when writing their styles, so, they built preprocessors for adding programming functionality.

Salient features:

– Arithmatics i.e. addition, substraction, multiplication, division

– Variables

– Functions

– If & else conditions

– Looping

– Mixins

– Extends

– Color operations

– Imports, etc.

Pros and Cons of using Css Preprocessors:

Pros

– Cleaner code

– Saves you huge time

– Easy to setup

– More organized

– Faster development

Cons

– Learning curve

– While working in a team…

– And, too much of everything is a con (nesting, mixing)

Sass Preprocessor

---

Sass is Ruby based Css extension. For running Sass, you need to have ruby installed. You can install sass with this command – sudo gem install sass.

Once sass is installed, you can run it with the command sass input.scss output.css from your terminal.

Let’s understand ‘Sass’ by taking instances of variables,nesting and loops.

Variables in Sass

$font-size: 14px;

div {
    font-size: $font-size;
}

Nesting in Sass

$link-color: #000;
ul {
    margin: 0;
    li {
        float: left;
    }
    a {
        color: $link-color;
    }
}

Loops in Sass

@for $i from 1px to 5px {
    .border-#{i} {
        border: $i dotted green;
    }
}

Less Preprocesor

---

Since Less is written in Javascript, so, you will need NodeJS to run it. Install Less using npm install -g less on Linux/Mac and use lessc styles.less styles.css to compile it to Css.

On windows, you first need to install Node.Js installer followed by:

1. npm install less (install)

2. lessc styles.less styles.css (compile)

Here also, let’s understand ‘Less’ by taking examples of variables, nesting and loops.

Variables in Less

@font-size: 14px;
div {
    font-size: @font-size;
}

Nesting in Less

@link-color: #000;
ul {
    margin: 0;
    li {
        float: left;
    }
    a {
        color: @link-color;
    }
}

Loops in Less

.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));
    .border-@{counter} {
        border: 1px * @counter dotted green;
    }
}

Let’s Conclude our journey into Css preprocessors: If you are technical and coming from programming background, then Css is very powerful and streamlined. Sass is more widely used beside Less, with rich set of features. All this makes Css highly extensible, maintainable and themeable. 

Please comment down your view points on my small post concerning #preprocessors_of_css. I’d love to hear and answer you!