Are you not using any CSS preprocessor yet? I find many web designers around who still prefer to work with plain CSS, of course, most of them are working on relatively small projects. Using CSS preprocessor in medium to large sized web project is not a choice any more. It is a must since CSS is not yet advanced enough to take on the challenges posed by modern web design needs.
Getting started with CSS preprocessor needs considerable amount of effort in the beginning and that is what keeps many web designers deprived of the glories of using such preprocessors.
There are many CSS preprocessors out there and offer most of the required features that make CSS authoring fun, fast and powerful.
The selection of CSS preprocessor should mostly be dependent on how well it fits in your web design workflow, what features it provides, what platform it runs on, how supportive is the community and how often new features and enhancements are incorporated.
SASS
Is Sass the best CSS preprocessor out there? It depends on what your needs are, Sass is the most used and most popular preprocessor but is not the only one. Sass is built with Ruby and you need Ruby environment setup to use it.
If you are already working on Ruby and have not developed any preferences already then I would recommend Sass without a second thought. It definitely provides the most advanced features and ranks at the top of my list. Few of the key features are mixins, nesting, partials, loops, functions, extend, import and inheritance.
The best thing about Sass is the huge developer community that continuously keeps on adding new features and keeps Sass ahead in the game. Sass developers also work with W3C.org for enhancing the CSS itself, which brings in more trust and longevity.
The ecosystem of Sass has grown to the point that many of the major frontend development frameworks like bootstrap, foundation and Gumby are running on Sass CSS preprocessor. There are many tools, resource and ready to use mixins libraries available that makes it much easier to work with Sass.
Less
Less is also a very popular CSS preprocessor. It was the preprocessor of choice before Sass storm took over the preprocessors market. Less almost does everything that Sass does and extends CSS to provide powerful features like variables, nested style rules, mixins, imports, functions, loops and merge.
The best thing about LESS is that it is very easy to setup, install and use. It is built on JavaScript and there are few ways to get you started. It can run in browser, node or Rhino.
Running Less in browser is good for development and as easy as inclusion of below two lines of code in the document.
<link rel=”stylesheet/less” type=”text/css” href=”myCSS.less”>
<script src=”less.js” type=”text/javascript”></script>
For production usage, it is advised to compile .less to .css first mainly due to performance reasons. There are compilers available to do that. You can install Less in node using npm package, which is node.js package manager.
$ npm install -g less
Less too appears future proof since developer community is very active and keeps it updated with all the latest features that any other CSS preprocessor has to offer.
Stylus
Everybody is using either Sass or Less these days, what is it about Stylus? Stylus is also a powerful CSS preprocessor, growing rapidly and is here to compete with the likes of Sass and Less.
Stylus preprocessor definitely is built for speed and is a great plus in your CSS authoring workflow. The best thing about Stylus is the flexibility it provides in CSS authoring. You do not have to necessarily use braces, colons and semicolons in the CSS.
For example:
body { font: 12px Helvetica, Arial, sans-serif ;}
Can be written as
body font 12px Helvetica, Arial, sans-serif
Stylus ensures to compile your code to valid CSS and adds braces, colons and semicolons wherever required to keep your CSS W3C standards compliant.
Stylus also runs in node.js and you can quick install it using npm package manager, as shown below –
$ npm install stylus -g
Stylus is definitely way ahead in its approach and comes with many built in functions. The growth of Stylus purely depends on how fast the community grows and maintains Stylus. Let us keep a close eye on that.
CSS-Crush
PHP is the most popular web development platform, isn’t it? A CSS preprocessor running on PHP would definitely be a big plus.
We have CSS-Crush, the CSS preprocessor that runs on PHP. Not so popular yet but has all the potential to become an integral part of design workflow specifically for PHP based projects.
Setting up CSS-Crush in PHP based projects is as easy as inclusion of a library, and of course, it is just a PHP library.
CSS-Crush is still catching up if you compare with the top three CCS pre-processors but still a very good option for PHP based small to medium complexity projects.
Using it is as easy as including below line of code in the PHP file. You do not need to get into setting up Ruby environment as required by Sass or node.js as required by Less and Stylus.
<?php require_once 'path/to/CssCrush.php'; ?>
Below are the various features that CSS-Crush offers –
CSS minification, automatic vendor prefixing, use of variables, nesting, functions, rules inheritance and mixins to name a few. It can also be extended by using PHP plugins and that gives endless opportunities to automate CSS generation.
Myth
Don’t you get tempted to use CSS features that are still in the making? Yes, but then browser’s still don’t support these features.
We have a solution for this in the form of Myth CSS preprocessor. Myth compiles CSS of future to CSS supported by current browsers. It acts more like a CSS polyfill.
This is what I call as innovative solution. Work in the technology of future and when the future arrives, you are way ahead than the competition.
The best thing with Myth is that you do not risk your efforts and time investment in learning yet to be released CSS features. If those features are approved by W3C.org and released, you rock and are way ahead.
If some of the proposed CSS features that you are using now are even dropped, you still at least are converting then to workable CSS using Myth and definitely at par with any other preprocessor.
The only drawback is the lesser options here when you compare its features with the powers of Sass, Less and Stylus. Some of the key features that Myth supports but are still in pipeline with W3C for CSS enhancement are CSS variables, color functions and custom media queries,
Clay
Let us dive into the unknown territory – the Haskell Programming language. Clay CSS preprocessor is based on Haskell.
Clay is implemented in Haskell as EDSL i.e. Embedded Domain Specific Language and that is what makes it different from other CSS preprocessors like SASS, LESS or Stylus.
One needs to write Haskell programs to model the CSS that makes it necessary to understand basics of Haskell language to use Clay. On the contrary, SASS is based on Ruby but you do not need to understand Ruby language to work with SASS.
Getting started with Clay Preprocessor requires you to setup Haskell complier on your machine and then install the Clay package. When you write any program to generate CSS, you need to import Clay package.
Here is a very simple Haskell program to generate CSS file
import Clay
main :: IO ()
main = putCss myStylesheet
myStylesheet :: Css
myStylesheet = body ? background red
Running the above code will output below CSS:
body
{
background : rgb(255,0,0);
}
Pretty complex, isn’t it?
For the hardcore Haskell developers, it becomes a real easy to generate or model complex CSS. Full programming language gives flexibility and power in the hands of programmers.
One can extend the existing Clay package and add more libraries and features, opportunities for automation are endless here.
CSS-On-Diet
Don’t we have any CSS preprocessor running on Python? But why do you need it in the first place? Anyhow, we have CSS-On-Diet (COD) preprocessor that is written in Python. It is a command line tool and focuses mainly on the speed. It lets you write CSS faster.
As of now it doesn’t carry plethora of features that mainstream CSS preprocessors have, but does the basics quite well.
Like in Stylus, here also colons and semicolons are optional, any preprocessor that claims to be written for speed does this, isn’t it. It definitely helps and I am telling it form my personal experience of using Stylus and trying my hands on CSS-On-Diet.
All four lines below are valid in COD and means the same thing.
color: blue;
color blue;
color: blue
color blue
The best feature of CSS-On-Diet is use of Mnemonics, Look at the below one-
lih = line-height
les = letter-spacing
pal = padding-left
Instead of writing Line-height: 10px; You can just write lih 10 – That is what you call speed authoring.
Conclusion
CSS preprocessing has become a necessity of modern web design and that is why many CSS preprocessors are mushrooming every now and then.
The above mentioned CSS preprocessors are holding the ground tight and look promising in one way or the other. You can select one of these depending on the needs of the project, development environment and complexity that you can handle.
You select one, start working on that and if you don’t like it, switch to another one. Try 2-3 at least to freeze on one for long term usage.
What CSS Preprocessor are you using? Share your thoughts via comments
