Recently I had a lot of search about the CSS preprocessors. And I found that the leading preprocessors are LESS and SCSS. Of course, Sass is an older version of SCSS and still using by lot of people. Also there are more CSS preprocessors available over internet like Stylus, Turbine, Switch CSS, CSS Cacheer etc. But the most commonly used preprocessors are LESS, SCSS and Sass. Also there is an active discussion and debate happening over the Web about these preprocessors.
In this article we will discuss about the most commonly used preprocessors (LESS, SCSS and Sass). First of all we will define each of them
LESS
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
SCSS and SASS
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “.sass”). It’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.
Overview
We will have a look at the main features of LESS and SCSS.
Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
SASS
SASS is nothing but just remove brackets and semi column of SCSS. You are done.
Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments etc.
LESS
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
SCSS
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
Nesting
Rather than constructing long selector names to specify inheritance, you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
SCSS
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Functions & Operations (LESS)
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
Selector Inheritance
Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties.
SCSS
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
Usage
Less
Including Less in your project is very simple. First link your Less stylesheet
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Then download Less.js from lesscss.org, then include it just after the CSS link you include above.
<script src="less.js" type="text/javascript"></script>
That’s it. Now you are done. Simple right? There are lot of options also available if you need more control over it.
SASS / SCSS
You can only install Sass if you have Ruby on your OS. OS X is preinstalled with ruby and Windows users should install Ruby manually. Once Ruby installed, you can install Sass by running
gem install sass
That’s it. You are done.
Which one to Use?
Confused? Both LESS and SCSS has lot of features that minify CSS and save a huge time. Less will work on both client side and Server side. SCSS will only work on Server side.
If you are doing a small project, say a Static WebPages or HTML, I suggest you to use LESS. Because Less takes only few minutes to setup and start. SCSS need more effort and time to setup (mainly Windows).
If you have a large project and having Big Development, I suggest you to use SCSS because most of the programmers suggest it.
Conclusion
LESS and SCSS has lot of features to choose. This is just an overview to CSS Preprocessors. You can learn more about it and the Final word is yours.
Read more about: LESS
Read more about: SCSS / SASS
If you have a different opinion or suggestions about Preprocessors, Comment below.
