What are CSS Preprocessors?
A preprocessor processes an input file and outputs the same file in other format. For example, Haml, Sass and Less are some preprocessor languages - Haml is for Html files, while Sass and Less are for CSS files. CSS files complete with functions, mixins, variables, maths and much more, are compiled into regular CSS files that can be rendered by all browsers. Preprocessors add functionality and more power to web development using the CSS language. They add more readability to your code, easier to organize, lesser typing. You all probably know about WET and DRY. WET is Write Everything Twice, while DRY is Don't Repeat Yourself. Preprocessors help enforce a DRY environment over a WET CSS. The advantages of having DRY over WET is code is easier to maintain and time and space is less consumed.
Some features provided by two widely used CSS processors:
LESS
Runs on JavaScript, is processed client side.
Variables: denoted with symbol @, ex: @color.
Mixins: You can directly apply styles to others in the following manner:
.blue_text{
color: #333;
}
p{
background: #fff;
.blue_text;
}
Inheritance: No inheritance feature provided
Mathematical operations: Can perform operations like doubling with using * 2, etc.
JavaScript enabled: You can use JavaScript in your stylesheets
SASS
Runs on Ruby, is processed server side.
Variables: denoted with symbol $, ex: $color.
Mixins: Identify style to be included in other styles using @mixin, and include it in other styles using @include, in the following manner:
@mixin blue_text{
color: #333;
}
p{
background: #fff;
@include blue_text;
}
Inheritance: A style can inherit from an already established style using @extend.
Mathematical operations: Can perform mathematical operations, more versatility with different data types.
Loop controls and conditional statements available.
