May 6, 2015

361 Views

A classy way of using CSS through the CSS Preprocessor

CSS is a very simple language which is magical when creating websites with its powerful syntax. At times, it becomes tedious for developers to work on and maintain a non-trivial project which utilizes a huge number of CSS and where simplicity is quickly dissipated. Preprocessors can be used to solve this problem while making CSS more attractive.

What is CSS preprocessor?

Initially, even I wasn’t convinced about using the CSS pre-processor. I felt that CSS was much simpler and user friendly, but once I got started and understood the preprocessor’s genius, it was tough to turn back! A great advantage of using the CSS preprocessor is that it is not necessary to learn everything about it before using it. You can learn at your own speed and use whatever you have learnt.

The limitations in using CSS can be overcome by the preprocessor’s features, such as variables, nesting, partials, mixins, and other mathematical functions. CSS that are written in a preprocessed language are compiled into standard CSS syntax. There are many preprocessors that can be used to achieve this.

I would like to point out something for CSS newbies - Before diving into using a preprocessor, it would make more sense if you got comfortable with the regular CSS and its best practices. There are many preprocessors like Sass, Less, Stylus, CSS – Crush, Myth, Clay, and the list goes on. Out of these, Sass and Less are two popular preprocessors which you could choose as a personal choice.

Advantages of the CSS Preprocessor

  • Code can easily be maintained and reused
  • Theming is achieved using CSS preprocessors
  • Mathematical and operational functions can be used
  • CSS preprocessors can easily convert existing CSS files into preprocessor files (for e.g.: Sass or Less), as both are backwards compatible

This blog covers the basics about CSS preprocessors with Sass and Less.

Less is in JavaScript, whereas Sass is developed in Ruby. The most important thing is that you don’t need to know about these two languages to work with preprocessors. There are a number of customized apps developed to compile and work with them. These apps offer many features in addition to compiling. A major advantage is that we can enable the ‘watch’ command. This way, for every letter change in the sass/less file, the css will automatically be compiled and a new css generated. And these .scss or .less files will not be included anywhere in the html; only CSS will be, while the other preprocessor files can be ignored. It is used only for the purpose of development.

  1. Sass

You can use two syntaxes for this preprocessor.

  • Sass
  • SCSS

Sass was initially a part of another preprocessor called Haml which was designed by Ruby developers. Hence, Sass stylesheets were using a Ruby-like syntax with no braces, no semi-colons and a strict indentation.

This is pretty different from what we are used to with regular CSS. So in version 3 of Sass, SCSS syntax was introduced. SCSS known as Sassy CSS was introduced as "the new main syntax" for Sass. SCSS is definitely closer to CSS than Sass. SCSS is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is a valid SCSS as well.

  1. LESS

Less is one of the most popular CSS preprocessors, and is considered to be the strongest competitor to Sass. Less extends CSS syntax thoroughly with mixins, variables, nested style rules, and even rule-set looping.  It is pretty easy to set up, as you just got to reference its JavaScript file in your HTML document.

Features of CSS Preprocessor

  • Variables

Variables are a good way to start using the preprocessors. While working in a project which has multiple similar styles, you can set values to a name, then that variable name can be used in your CSS. Variables can only be defined once. CSS refers the variables that are declared, hence it is a best practice to declare the variables at first.

Less uses the @ symbol to define a variable. Sass uses the $ symbol to define a variable.

  • Nesting

Nesting keeps the stylesheet ordered and neat by grouping the corresponding CSS in a block. The syntax is the same for both Less and Sass

With the use of nesting, code can easily be modified as the requirement changes by editing it once, instead of updating everywhere. The best practice in nesting is to avoid traversing many levels. It is advisable to nest up to four levels.

  • Mixins

Mixins can hold as many CSS declarations as per the need and the entire block can be reused whenever required. This reduces the repetition of code and makes it more efficient by reusing the whole chunk anywhere. In Less, mixins are created just like a class declaration block. This means that any class can be used as a mixin. Just like variables, declare the mixin first before using it. To use the mixin, include it by its name.

In Sass, it requires a @mixin directive, followed by the mixin name as well as @include to use the mixin.

Final Thoughts

Many more features are available. I’ve provided insights on only three, just to give you a basic understanding of what a CSS preprocessor is. Ask any web developer and you’ll hear passionate arguments as to which preprocessor is better, but at the end of the day, it’s a personal choice. Yes, the choice is really up to you!

Reference

https://developer.chrome.com/devtools/docs/css-preprocessors