Writing CSS can become repetitive and little tasks such as having to look up hex color values, closing your tags, etc. can become time-consuming. A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS making you save time and keep full control of your CSS code.
There are a planty of CSS Preprocessor, Less, Sass, Stylus, and Swith CSS, just to name some of the most known and used. CSS Preprocessor is primarily intended to make authoring CSS more dynamic, organized and productive. But, the question is, which of them does the job best and better fits our needs?
We will take an overview of the two most popular and used CSS preprocessors: Sass and LESS.
Both Sass and LESS have extensions for faster and easier web development.
One of the most popular and currently used expension for Sass is Compass. It has a number of Mixins to write CSS3 syntax in less time.
But Compass has in it some many useful features such as Helpers, Layout, Typography, Grid Layout and Sprite Images. It also has config.rb file where we can control the CSS output and some other preferences making Compass an all-in-one package to work with Sass.
LESSĂ?Â has several extensions, they are separated and each of them are built by different developers so there isn't yet an all-in-one solution like Compass. This won’t be a problem for expert users but for those who are just approaching with LESS, they need to take some time to choose the right extensions that suit their needs.
Every CSS Preprocessor has their own language (mostly common) but same CSS sintax. Both Sass and LESS has Variables for example, but there is no significant difference in it, except Sass defines variables with a $ sign while LESS does it with an @ sign.
Considering that both Less and Sass are backwards compatible you can easily convert your existing CSS files into Less or Sass just by renaming the .css file extension to .less or .scss, my advice is to try a both and figure out which one you works better for you!
22 September 2015
So, what CSS Preprocessor should we choose? Ask any web developer and you’ll hear passionate arguments and quite different opinions as to which one is better but at the end of the day, it’s a personal choice.