CSS preprocessors add functionality to CSS files, with the aim of saving developer time and effort. If you have written in any CSS preprocessing language, then you can convert it into another type of data.
Preprocessors can enhance the functionality of CSS with assets like variables, operators, interpolations, functions, mixins to name a few. All these assets are integrated to the regular CSS syntax for increased efficiency and productivity.
The Need for CSS Preprocessors
When you peruse the evolution of web over the years, you can easily see that using CSS as it is will never be enough. It is an almost primitive concept. And when it comes to complex projects, the task becomes even tougher. On the other hand, new specifications are added to HTML frequently.
You can try writing better CSS by separating definitions into smaller files and transferring them all into one big file. While it handles component issue successfully, it can lead to other problems like code repetitions and maintenance.
Different solutions to solve this were tried, but nothing could improve the maintenance issue that still cropped up. This is where CSS preprocessors come in. They are integrated with advanced features that would help you write not only reusable codes, but you can easily make them extensible and maintainable. Preprocessors can help increase developer productivity
Why Go for CSS Preprocessors
As CSS preprocessor is an advanced version of CSS technology, it makes the basic CSS fully competent. Let's look at the key advantages of using this technology.
1. CSS preprocessor is DRY, Not WET
One of the most noted features of CSS preprocessor is that it follows the DRY (Don�t Repeat Yourself) principle and not the WET (Write Everything Twice) principle when it comes to writing codes. It saves developer time because they no longer have to worry about writing codes repeatedly.
2. Aids in Modularization and Portability
The structural elements of certain sites remain the same, and preprocessing, especially in the LESS style (will be discussed later) makes it easy to make reusable modules. Developers can now use variables to change colors, visual aspects and fonts by tweaking on a few values eliminating the need for search and replace.
3. An Impressive Time-Saver
Needless to say, hardcoding CSS is a time taking task because you�ve got to run through a series of activities like typing selectors, writing color strings, their properties and so on.
And you need to do the whole process all over again when you need to incorporate the same things elsewhere. Preprocessors can save a lot of time and effort by helping to avoid repetitive coding and redundancy.
4. Enjoy the Power of Code Reuse
As CSS is mostly about typing the same code over and over again, developers are well aware of the monotony behind it. For example, if you want a specific menu to have a drop shadow feature, you need to retype the code or copy-paste it each time.
With CSS preprocessor, this effort is eliminated because you can use mixins to define global styles with desired functions and capabilities so you can reuse them whenever needed. Just a simple line of code would be sufficient.
5. Your CSS Gets More Organized
Using preprocessors, makes the CSS more organized, especially when it comes to LESS and Sass, two of the most popular CSS preprocessors. Both these styles support nested definitions.
6. Easy to Write
If you know CSS, and have experience in writing Less and Sass.scss files, then preprocessors are even easier to write.
If you want to start a new project, you can pick up these threads and start right away eliminating the need to write everything once again. You can enjoy more concise style sheets that can be easier to write, maintain and update, and even handled by multiple people.
7. Easy to Setup and Maintain
The code can be easily maintained and reused. The changes are edited once, so you no longer have to update it everywhere.
You can use the variables, mixins and functions and define a value or even a group of values and then it uses the same with little tweaks here and there. Preprocessors help you maintain large style sheets so you can run them whenever needed.
Popular CSS Preprocessors � Sass, Less and Stylus
By now, it is clear that CSS preprocessors are extension languages that developers use to compile into CSS. The main aim is to speed up developer time. There are plenty of preprocessors that developers use depending on their requirement.
Developers can choose from among these preprocessors to parse it to their regular stylesheets. They are Sass, Less, Stylus, SwitchCSS, Turbine, CSS-Crush, Compass, to name a few.
The three most popularly used CSS preprocessors are Sass, Less and Stylus. Let's go into each of the three in detail:
1. Sass (Syntactically Awesome StyleSheets)
Extremely feature-rich and highly compatible with CSS, Sass is coded in Ruby, is cross platform and integrated with more capabilities than any other CSS extension language. A number of frameworks are built with Sass like Compass, Bourbon and Susy.
The interesting part is that Sass is similar to CSS, but minus the curly brackets and semicolons. It has superb features like variables, mixins, inline imports, selector inheritance, etc. There are also advanced features like control directives for libraries.
Sass enjoys a very strong and active developer community comprising of developers from famous IT companies and it boasts of a mature Core team.
Sass follows two syntax options - SCSS and SASS.
The SASS syntax is the older version and is also known as �the indented syntax�. It is called so because it uses indentation to separate the breaks in the code and newline characters to separate rules. This syntax will be more suitable for a Ruby/Python developer team, when compared to a PHP/Java team.
SCSS is similar to syntax of CSS. It follows a block formatting principle where braces are used to denote code blocks while lines within a particular block are separated by semicolons. Interestingly, this syntax is now becoming more default and pro-eminent. Probably, it is because developers now use SCSS syntax for developing the existing tools, demo and plugins for Sass.
Let�s examine this code:
#skyscraper_ad {
display: block;
width: 120px;
height: 600px;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
#leaderboard_ad {
display: block;
width: 728px;
height: 90px;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Now look how it is written in Sass
#skyscraper_ad
display: block
width: 120px
height: 600px
#leaderboard_ad
display: block
width: 728px
height: 90px
Credits: Treehouse
Before you start using Sass, make sure you have installed Ruby in your system. For Linux, Ruby can be installed with the help of apt package manager - rbenv or rvm.
sudo su -c "gem install sass"
Ruby can be installed in Windows by the Ruby Installer and in Mac, Ruby is already installed in it.
Installing Sass
Now, for the installation of Sass, follow these steps:
You can use Sass from the command line or as part of the web framework.
Install gem before you begin.
gem install sass
The command for converting CSS to Sass goes like this:
sass style.scss
The command for compiling it back to CSS:
sass --help
Add config.gem "sass" to config/environment.rb to install Sass in Rails 2.
Either add gem "sass" to your Gemfile or place in public/stylesheets/sass in .sass or .scss files where they'll be compiled to corresponding CSS files in public/stylesheets according to requirement, automatically.
The command for using Rack-enabled web framework with Sass goes like this:
require 'sass/plugin/rack' use Sass::Plugin::Rack
Add this command to config.ru. This will help compile any Sass file in public/stylesheets/sass to CSS files in public/stylesheets
Credits: GitHub/Sass
2. Less
Many developers who work with CSS say that they don�t like to use it as it is. But when it is combined with frameworks like LESS, their work is cut out for them. Less is thus, a superset of CSS, capable of running on both client-side and server side, with Node.js - the JavaScript runtime platform preferred by developers to build scalable network apps.
An open source extension language, it helps developers use values within variables. It also helps them to define the variables. Less helps you do the programming and logic powerfully well. For this purpose, it provides the following mechanisms - nesting, mixins, operators, functions and of course, variables.
The learning curve to using Less is minimal as you can use the existing CSS�s already valid LESS code.
There is a major difference between Less and other CSS precompilers. The difference is that Less allows for real time compilation with less.js by the browser when compared to the others.
Less makes CSS maintainable and extendable. It runs inside Node within the browser and inside Rhino. Less is integrated with 3rd party tools that allows you to compile your files.
Here is an example of working with Less
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
This compiles to:
.box {
color: #fe33ac;
border-color: #fdcdea;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Installing Less
Through your node.js package manager, npm, you can easily install Less on the server. It looks like this:
$ npm install -g less
Once that step is completed, you can invoke the compiler from the command line:
$ lessc styles.less
This will output the compiled CSS to stdout.
To save the CSS result to a file of your choice use:
$ lessc styles.less styles.css
To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css
$ lessc --clean-css styles.less styles.min.css
Credits: Less
3. Stylus
Stylus, the 4th most commonly used CSS preprocessor syntax is the closest thing you can get to a full programming language, on that side of JavaScript. It is cross-platform too and can be written in both Jade and Node.js.
Apart from all the regular preprocessor features, you can define your own set of functions for CSS parameter management and expansion. Another major advantage of Stylus are the transparent mixins. This helps you to define the functions, but without the need to specify the list of parameters. It helps you copy any parameter string into the CSS.
Stylus� another unique feature is its interpolation, the ability to use a few lines of code to wade through a predefined list of strings of values. This is perfect for writing dense codes.
The functions of Stylus give access to variables in their lexical scope. Stylus also lets you escape characters, turning them eventually into identifiers, and rendering them as literals.
For installation of Stylus, follow
$ npm install stylus -g
For basic use,stylus -w style.styl -o style.css
Check out this example:
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
body a
font: 12px/1.4 "Lucida Grande", Arial, sans-serif
background: black
color: #ccc
form input
padding: 5px
border: 1px solid
border-radius: 5px
Giving the above commands would compile to:
body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: #000;
color: #ccc;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
form input {
padding: 5px;
border: 1px solid; -moz-border-radius: 5px;
border-radius: 5px;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
The indented version of Stylus source with CSS syntax would look something like this:
border-radius() {
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: black;
color: #ccc;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
form input {
padding: 5px;
1px solid;
border-radius: 5px;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Credits: GitHub/Stylus
Main Features of Sass, Less, Stylus � a Comparison
As said before the main aim of using CSS preprocessors is that they save time so the developer need not have trouble managing the code. Let's go a little deeper into the three main CSS preprocessor frameworks for better understanding:
SASS
Sass is written in Ruby and it extends the capabilities of CSS through features like nesting, variables, mixins and functions. You can use Sass with Compass, a framework that allows you to have functions and add-ons built atop Sass. This allows you to have cleaner codes, dynamic image sprites, produce excellent outputs for CSS3 features.
LESS
Less is written in JavaScript; the first version was written in Ruby. It is capable of extending CSS through mixing, operations, variables and functions. The syntax for Less is almost akin to CSS and the documentation is design friendly.
As it is integrated with dynamic features, frameworks like Bootstrap use Less. An interesting feature about Less is that it runs inside the Node, browser and Rhino. Less conforms with 3rd party tools to compile your files.
When compared to other preprocessors, Less�s syntax is purer to CSS, enabling a smooth transition to a preprocessors. With Less, the classes used by developers become reusable as mixins.
Stylus
Stylus is also written in JavaScript. It is equipped with the features of both Sass and Less. There is an extension library similar to Compass n Stylus. Its called Nib and it provides cross-browser CSS3 mixins. Stylus syntax is very minimal and flexible, eliminating the need for semicolons, curly brackets and parenthesis.
Though the features of Less, Sass and Stylus are common, there are slight variations in how they are used. This comparison discusses those unique aspects of each.
1. Variables
Variables are the main features of CSS. For example, in Sass, the variables start with $ sign, while in Less you use @ sign and in Stylus, there is absolutely no prefix. In Sass and Less, developers use colon (:) to assign the value. In Stylus, the sign for value is �equal to� (=). For both Less and Sass, the value is closed with a semicolon, a typical for CSS.
Every developer defines a base color and uses this all over the CSS file, instead of writing the hex or naming the color in the property specifically.
SASS Variables
$font-size: 16px;
div {
font-size: $font-size;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
LESS Variables
@font-size: 16px;
div {
font-size: @font-size;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus Variables
font-size = 16px
div
font-size font-size
Compiled CSS
div {
font-size: 16px;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
2. Mixins
Mixins allow the reuse of properties throughout the stylesheet. So developers no longer have to go throughout the stylesheet to make changes. Instead, they can just make the changes in the mixin.
Mixins are powerful tools that saves developer time and energy. Sass needs a few extra symbols for mixins, while Stylus is neat regarding that.
SASS Mixins
@mixin bordered($width) {
border: $width solid #ddd;
&:hover {
border-color: #999;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
h1 {
@include bordered(5px);
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Less Mixins
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
h1 {
.bordered(5px);
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus Mixins
bordered(w)
border: n solid #ddd
&:hover
border-color: #999
h1
bordered(5px)
Compiled CSS
h1 { border: 5px solid #ddd; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
h1:hover { border-color: #999; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
3. Nesting
CSS does not have the visual hierarchy while working with child selectors. You will have to write it separately, making the combinations in separate lines.
With the Nesting feature, this problem is solved as it provides the visual hierarchy in HTML, thereby increasing the readability.
It is imperative to use Nesting wisely because if you are not careful, it could cause over-sizing of selectors.
SASS Nesting
$link-color: #999;
$link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
a {
color: $link-color;
&:hover {
color: $link-hover;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Less Nesting
@link-color: #999;
@link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
a {
color: @link-color;
&:hover {
color: @link-hover;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus Nesting
link-color = #999
link-hover = #229ed3
ul
margin 0
li
float left
a
color link-color
&:hover
color link-hover
Compiled CSS
ul { margin: 0; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul li { float: left; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul a { color: #999; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul a:hover { color: #229ed3; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
4. Extends
Extends help you share generic definition with selectors, instead of copying. While using Less, you can either select only the main instance or you can use every instance of extended selectors by adding the �all� attribute to extend method.
In Sass, it is different. It extends all instances of extended selectors including its child selectors and inherited properties.
SASS Extends
.block { margin: 10px 5px; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
p {
@extend .block;
border: 1px solid #eee;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul, ol {
@extend .block;
color: #333;
text-transform: uppercase;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
LESS Extends
.block { margin: 10px 5px; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
p {
&:extend(.block);
border: 1px solid #eee;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul, ol {
&:extend(.block);
color: #333;
text-transform: uppercase;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus Extends
.block
margin 10px 5px
p
@extend .block
border 1px solid #eee
ul
ol
@extend .block
color #333
text-transform uppercase
Compiled CSS
.block, p, ul, ol { margin: 10px 5px; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
p { border: 1px solid #eee; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
ul, ol { color: #333; text-transform: uppercase; https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
5. Imports
SASS, LESS and Stylus helps you to separate your code in small, manageable pieces for better maintainability and control. You can group similar code chunks in similar folders and then import them all to the main CSS.
SASS Imports
@import "library";
@import "mixins/mixin.scss";
@import "reset.css";
LESS Imports
@import "library"
@import "mixins/mixin.less"
@import "reset.css"
Stylus Imports
@import "library"
@import "mixins/mixin.styl"
@import "reset.css
6. Color operations
Stylus, Less and Sass have color functions that allow the developers to play with them. You can mix colors, lighten it, fade it, saturate it.
SASS Color Operations
saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)
LESS Color Operations
saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)
Stylus Color Operations
red(color)
green(color)
blue(color)
alpha(color)
dark(color)
light(color)
hue(color)
saturation(color)
lightness(color)
7. If/Else Statements
While Sass and Stylus supports normal If/Else Statements, this can be achieved through CSS guards with Less.
The preprocessors use Loops to iterate through arrays or for creating series of styles, for example, setting the grid width. Less, like in the if/else case, uses the CSS guards.
Though each are slightly different in their behavior, there are certain cases where Stylus and Sass behave similarly in their approaches. Some of the shared features are Selector inheritance through @extend, built-color functions, Import directives, control directives and Interpolation.
SASS If/Else Statements
@if lightness($color) > 30% {
background-color: black;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
@else {
background-color: white;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
LESS If/Else Statements
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus If/Else Statements
if lightness(color) > 30%
background-color black
else
background-color white
8. Math
The Math operations are used for standard arithmetic or unit conversions. Both Sass and Stylus allows for arithmetic between different units. Less also provides you the ability to use mathematical operations in your stylesheets. This makes it useful when combined with variables.
SASS Math
1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5
LESS Math
1cm * 1em => 1cm * 1em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5in
Stylus Math
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in
9. Loops
LESS uses CSS Guards and recursive mixins for looping, almost similar If/Else feature.
SASS Loop
@for $i from 1px to 3px {
.border-#{ihttps://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png {
border: $i solid blue;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
LESS Loop
.loop(@counter) when (@counter > 0){
.loop((@counter - 1));
.border-@{counterhttps://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png {
border: 1px * @counter solid blue;
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
https://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
Stylus Loop
for num in (1..3)
.border-{numhttps://www.cabotsolutions.com/public/mobile-app-development-best-practices-cta.png
border 1px * num solid blue
Credits: HTML Mag
Now that you have gone through each of the features of Sass, Less and Stylus in particular, you can make your choice on which would be required for your project.
Wrap Up
In short, all the above mentioned preprocessors would make your CSS more organized, dry and maintainable. You can pick one of these CSS extension frameworks to make beautiful codes and become an efficient front-end developer.
It is not possible to say which of these is best, because you need to incorporate them into your workflow. When you are using a CSS preprocessor, you are using a syntax, so it is not entirely a new language that you are learning.
Interested in having better styled web pages and user interfaces? We're here to help...