What are CSS Preprocessors? and Why use them?
Using Cascading Style Sheets or CSS, we can design our websites exactly the way we want it. But CSS has its limitations as well. It is proven that CSS can help to create a stunning website. But in a case when we come across large and complex sites it makes it tough to maintain CSS throughout the website. Due to this, requirement arises where a designer wonders if stylesheet language could have been better and it is where CSS Preprocessors comes into play. These preprocessors make the CSS structure more readable and easier to maintain. There are many CSS Preprocessors whereas most commonly used preprocessors are Leaner Style Sheets or LESS and Syntactically Awesome Style Sheets and Stylus or SASS.
LESS and SASS?
These two are CSS preprocessors or the dynamic preprocessor style sheet languages that can be compiled into CSS and hence run on either the client-side or server-side. Where LESS is JavaScript based and SASS is Ruby-based preprocessor. There are two ways to install them –
- using 3rd party applications.
- through the command line.
For installing SASS, we will need to install RUBY and for LESS, we will need NodeJS to run it.
We can also install their extensions in our code editors to highlight SASS or LESS syntaxes with proper colors for example: for Eclipse there is an extension “Eclipse platform” for SASS and “Eclipse for LESS” for LESS.
Just add your SASS and LESS syntax and your CSS file and save it using file extensions .sass or .less. respectively.
Features of LESS and SASS
Both of them provide a lot of features that help us to compact our CSS. Let’s discuss some of the SASS and LESS features, that help us in using CSS in a better way and hence saving our time.
-
Variables: These preprocessors provide us the advantage of using variables in which we can store values like colors, fonts, background-colors or images, etc. Basically, things are going to be the same throughout the whole site or project.
Example:SASS LESS
$theme-font: Helvetica, sans-serif;
$theme-color: #7e7e7e;
body {
font: 100% $theme-font;
color: $theme-color;
}
@theme-font: Helvetica, sans-serif;
@theme-color: #7e7e7e;body {
font: 100% @theme-font;
color: @theme-color;
}And eventually, these variables will be replaced by their values and hence generate a traditional CSS.
-
Mixins: These are used to include different properties together.
Example:SASS LESS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
.bordered {
border-top: dashed 2px blue;
border-bottom: solid 2px blue;
}
#demodiv a {
color: #111;
.bordered;
}
-
Extend: This feature allows to share the properties between multiple selectors.
Example:SASS LESS
.button{
border: 1px solid black;
border-radius: 5px;
color: white;
}.success{
@extend .button;
background-color: green;
}
.error{
@extend .button;
background-color: red;
}
.button{
border: 1px solid black;
border-radius: 5px;
color: white;
}.success{
&:extend(.button);
background-color: green;
}
.error{
&:extend(.button);
background-color: red;
}
-
Operations
Example:SASS LESS
.demoDiv{
text-align: center;
width: 665px / 925px *100;
}
.demoDiv{
text-align: center;
width: 220px / 908px *100;
}
OUTPUT OUTPUT
.demoDiv{
text-align: center;
width: 71.9%;
}
.demoDiv{
text-align: center;
width: 24.2%;
}
-
Nesting: Nesting creates a visual hierarchy, the same as we saw in the HTML, and allows us to write and understand the properties and add to them easily.
Example:SASS LESS
.heroDiv {
span {
display: block;
padding: 12px;
}
ul {
padding: 0;
list-style: none;
}
li {
display: inline-block;
padding: 10px 0;
}
}
.heroDiv {
margin: 20px 0 30px 0;ul {
padding: 0;
list-style: none;
}
li {
display: inline-block;
padding: 10px 0;
}
}
OUTPUT OUTPUT
.heroDiv span {
display: block;
padding: 12px;
}
.heroDiv ul {
padding: 0;
list-style: none;
}
.heroDiv li {
display: inline-block;
padding: 10px 0;
}
.heroDiv {
margin: 20px 0 30px 0;
}
.heroDiv ul {
padding: 0;
list-style: none;
}
.heroDiv li {
display: inline-block;
padding: 10px 0;
}
Being the most extensively used JavaScript library, a jQuery certification will add enormous value to your skill-set. jQuery provides various functionalities to the developer in order to develop complex applications with ease and efficiency.
