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.
You can use two syntaxes for this preprocessor.
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.
Features of CSS Preprocessor
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 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 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.
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!