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
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
Why LESS ?
– Mixins – Classes for classes
– Nested Rules – Classes within classes
– Nested Rules – Classes within classes,to cut down repetitive code.
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.
Why Stylus ?
- Powerful functionality
- Clean and minimal yet flexible syntax
- 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!!!