image

CSS preprocessors

Tools that help you extend CSS with some features that don’t exist in pure CSS

CSS is primitive and incomplete. Building a function, reusing a definition or inheritance are hard to achieve. For bigger projects, or complex systems, maintenance is a very big problem. This is where a preprocessor can help.

A CSS preprocessor is a program that lets you generate CSS from the its own unique syntax. To use a CSS preprocessor, you must install a CSS compiler on your web server.

There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.


Sass

image

sass-lang.com

Sass is the most mature, stable, and powerful preprocessor. It is completely compatible with all versions of CSS, very mature, feature rich, industry standard, large community, and has many frameworks built around.

Less

image

lesscss.org

Less (Leaner Style Sheets) is a backwards-compatible language extension for CSS. Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

Stylus

image

stylus-lang.com

Stylus is a preprocessor developed by Holowaychuk and influenced by Sass and Less. It offers a wider range of features, a super-fast Node.js system under the hood, and gives users the most freedom in how they write their CSS.

PostCSS

image

postcss.org

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.