CSS preprocessors have become a hot topic lately. There has been a lot of debate popping up online about different types of preprocessor languages available and which one to choose. The concept of using supercharged, special CSS files that contain mixins, functions, variables and various different features is certainly intriguing.

However, a majority of web designers are wondering why do they need to add another layer of complexity to the designing stage.

CSS preprocessor languages may seem like an added responsibility but they actually are not. In fact, they make the whole process a lot easier.

Let's find out what's so good about these preprocessors with the list of top 5 reasons.

1 :It Makes Your CSS Dry

Dry CSS basically means “Not repeating your CSS over and over again”. Well, as a matter of fact, “don't repeat yourself” is the first and foremost principle of programming. However, with vanilla CSS, it probably near to impossible.

You probably be dealing with something like this on a daily basis.

.large-heading {
 font-family:Helvetica, Arial, sans-serif;
 font-weight:bold;
 font-size:24px;
 text-transform:uppercase;
 line-height:1.2em;
color:#ccc;
}
.med-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:18px;
text-transform:uppercase; 
line-height:1.2em;
color:#ccc;
}
.small-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:14px;
text-transform:uppercase; 
line-height:1.2em;
color:#ccc;
}

The length of the code itself seems tiring. However, wouldn't you like it if could write the code something like this instead:

.large-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}
.med-heading {
.large-heading;
font-size:18px;
}
.small-heading {
.large-heading;
font-size:14px;
}

2: Offers plenty of features

CSS is a simple language or in layman's language, is an aphonic language. You pick few selectors and style them with certain properties. Moreover, you do it again and again, probably for every element available on your website. However, considering CSS preprocessor language, you use things such as functions, mixins, and variables that make it a powerful language.

3: Easier to maintain code

Since it allows you to use variables, functions and mixins, you can now define a property or set of properties only once and use them for a number of times, which makes it easier for you to maintain your code as well as CSS files.

Example:

@bodycolor: #4575D4;
@accentcolor: #FFA700; 

which can be used like this later:
a {@maincolor;}
primary-nav {background-color:@accentcolor;}

4:Organized CSS files CSS preprocessor languages help you organize your CSS files since almost every preprocessor language support nested CSS. It makes absolute sense to write CSS with functions and in nesting format instead of the old way.

Example:

h1 {
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
line-height:1.2em;
a {
color:black;
	&:hover {text-decoration:none;}
  }
}

5: Supercharged Frameworks

Frameworks available for CSS make it even easier for designers to write CSS code and manage files. Frameworks are basically developed on top of cascading stylesheets. These frameworks automatically produce vendor-specific CSS3 code and offer an abundance of functions for producing sticky footers, grids and much more.

Less vs. Sass 

Less and Sass are two most popular CSS Preprocessor languages that have gained a lot of popularity recently. However, some say Less is good while others consider Sass as a better option. The debate of CSS Preprocessors has taken many shapes, which is why we decided to discuss it in detail here.

As a matter of fact, Less and Sass are extremely similar in many ways including JavaScript Evaluation, Scope, Namespaces, Color Functions, Operations, Nested Rules, Parametric Mixins, and Mixins.

Less is basically a JavaScript library, which is processed client-side just like any other JavaScript code. On the other hand, Sass is processed on server-side since it runs on Ruby, an object-oriented and general purpose programming language. A majority of web designers avoid using Less since it takes additional time to be processed by the JavaScript Engine.

Which bring us to.....

A detailed comparison between Less and Sass

Less is more like CSS in terms of structure, syntax and style creating a reasonable learning curve. However, there are various issues related to it which makes it a no-go preprocessor.

Logic statements:

When it comes to Less logic statements, you have to use guarded “mixin”. These are those mixins which work when a certain condition is met. As an instance, you want to set the font of text based on the color of the background.

.lightswitch(@colour) when (lightness(@colour) > 40%) {
color: @colour;
background-color: #000;
.box-shadow(0 3px 4px #ddd);
}
.lightswitch(@colour) when (lightness(@colour) < 41%) {
color: @colour;
background-color: #fff;
.box-shadow(0 1px 1px rgba(0,0,0,0.3));
}

Less does allow you to do certain fancy things but this is where it ends. Sass offers you real logic and looping abilities. It comes with different operators such as while loops, for loops, each loop, and if/else/then statements to help you do the actual programming.

Example:

$width:auto;
@mixin clearfix($width) { 
@if $width == 'auto' { 
// if width is not passed, or empty do this 
} @else { 
display: inline-block; width: $width; 
} 
}

Custom functions:

Sass allows you to write your own functions like

$em-base: 16px !default;
@function emCalc($pxWidth) {
@return $pxWidth / $em-base * 1em;
}

However, in Less
@em-base: 16px;
.emCalc(@pxWidth) {
//Ah. Crap...
}

Math: Though the math for both Less and Sass is similar, you may find it difficult to understand how units are handled initially.

In Sass, you get errors in case you try to use two different units together such as:

div {
width: 100px + 2em;   
}

Error: Incompatible units: 'px' and 'em'

However, in Less, you do not get any error. In fact, it takes the first unit used as the resultant.

div { 
width: 100px + 2em; // == 102px  
}

Handling variables:

Sass uses $ whereas Less uses @. Well, the matter of the fact is that @ has an inherit meaning in CSS such as declaring blocks of @media or @keyframes.

Sass has a problem with the scope of variables. If, in case, you want to overwrite a “global” variable as “local”, it replaces the local value. You probably find it difficult to get a hang of this if you are pretty much into programming and developing as well.

Learning Curve:

Less has reasonable Learning curve since it is quite similar to CSS and offers less fancy options while Sass has a steep learning curve because of all the advanced features it comes with. Though you do get a hang of it eventually, you probably find it hard to understand at first.

Well, looking at the whole scenario, Sass is clearly the winner. It has proved to be better than Less in many different aspects; however, it all narrows down to your personal choice. If you are new to CSS preprocessors, you can start off with Less and make your way to Sass.

Happy CSS programming!