CSS Pre-Processors with Super Powers … (SASS/LESS/Stylus)
A program or software installed on developer’s computer that receives a set of input data to produce certain output that will be used as input by another process is what we call is as Pre-processor.
In our case of CSS Pre-Processors, its one or several files in a special syntax transformed into CSS language.
The advantage is
- Better organization in project.
- Nested syntax
- Re-using CSS rules(Modularity)
- Mathematical functions
- Easy integration of tools to optimize/compress
- Extendibility
SASS : CSS’s Superhero …
One of the extensively used CSS extension language in the world SASS (Syntactically Awesome Stylesheets).
Its completely compatible with all versions of CSS so that seamless use of CSS libraries is available.Thanks to Hampton Catlin the creator.
Why SASS ?
-Ease in writing code:border radius – vendor prefixes.
-Ease to maintain code:variables lighten & darken text.
-Reusable Color Scheming.
-Easy, variables allow you to use an element more than once.
SASS is a lookalike CSS but once you dive in you can make up to the differences and you’ll wonder how you ever lived without it.A few years back separate files were used based on the content i.e. fonts, colors, grids but now SASS uses a Ruby compiler to break up our stylesheets into multiple files and then have one “style.scss” that “@import”s all the various other stylesheets when it is complied.Just visit Sass-lang.com to learn how to install in an easy step-by-step format. In the end, using any method be it command line or app, the Sass installation will watch your changes and automatically compile down to traditional CSS for you.
Another thing in SASS is its feature of reusability. Benefit is that working with things like colors and fixed width sizes becomes easier.Illustrating an example .
Suppose you have defined a background color #BBB your footer text color may be #BBB, along with your border around images, as well as the highlight background of any links that are clicked.
In your CSS stylesheet you may declare background: #BBB; and color: #BBB twenty or thirty times throughout your project.But SASS makes it easy for you.Simply declare a variable named $light-gray; Any time you needed to use the color #BBB, you would simply declare background: $light-gray. Very simple. In the future when you need to change the color to #ededed you simply go to that variable reference and change $light-gray to #ededed – one time instead of thirty times; what a time-saver.That is what SASS is.
LESS : Superset of CSS
It is add on to CSS syntax. After getting inspiration from SASS Alexis Sellier in 2009 started developing LESS originally it was on Ruby on Rails later replaced by JavaScript.Less (Stylesheet language) and SASS more or less are equivalent to each other syntactically.Less’ foremost function is to create very structured, reusable and flexible stylesheets. Stuff like performance is cool.
Why LESS ?
– Mixins – Classes for classes
– Nested Rules – Classes within classes
– JavaScript evaluation – JavaScript expressions evaluated in CSS
– Nested Rules – Classes within classes,to cut down repetitive code.
Less is Declarative coding in .less is way faster, it’s very unforgiving that is you need to very specify want you want to see.If you start using Less religiously then CSS can never be a problem.It creates less requests on a server,means a faster website.LESS adds dynamic properties to CSS including variables, operations, function-like elements, even Javascript into the mix.Compiling the LESS file is a bit tedious.Mac users can use LESS.app, a small application which can detect all your LESS files automatically and whenever you save them it will convert them to a CSS file with the same name.
Window users can Winless which works in much the same way.Also you can use command-line tools ,Node Package Manager (NPM) to install LESS. Some documentation is available on the LESS website.
With its advance features LESS makes everyone happy the fact is that LESS understand CSS at least as IE6 did, and can generate valid merged file, a skeptic might argue that this is not so revolutionary achievement, but in the world of CSS preprocessors it is amazing success.
Stylus :
Expressive Robust CSS language Influenced from SASS And LESS Stylus came into existence or developed by LearnBoost.As it is NodeJS-based, there is no need of another technology in the stack.It also provides a JavaScript API for customized preprocessing.
Why Stylus ?
- Powerful functionality
- Clean and minimal yet flexible syntax
- Ability to run via Node.js / JavaScript, (no Ruby)
- Enforced Indentation
- Get rid from syntactic brackets,colons,semi-colons
- Keeps thing DRY(Do not Repeat Yourself)
Stylus is very similar to less except that of concise syntax.It is also imperative as it has if and for loop declarations and a bit verbose. It supports both an indented syntax and regular CSS style.Installing Stylus manually is the best way .To get started you need to first install install Node.js.Stylus is an open source project hosted on GitHub.
Just compare how many features a language has and choose the correct syntax!!!
/style.less */
h1 {
color: #0982C1;
}
|
/* style.sass */
h1
color: #0982c1
|
/* style.styl */
h1 {
color: #0982C1;
}
/* omit brackets */
h1
color: #0982C1;
/* omit colons and semi-colons */
h1
color #0982C1
|