You can use it with both plain CSS syntax and that of the preprocessors mentioned above. PostCSS was initially released in 2013 and is currently on version 7. Using them, you can process CSS and create custom tools. PostCSS is, in its essence, an API with a ton of empowering JavaScript plugins available (you can write your own as well). It can be used as a preprocessor, a postprocessor – actually, a processor of all kinds which can also help you optimize, clean your code, and perform all sorts of other tasks. While the team did use the term at first, they later addressed their mistake. Let's start off by stating one thing clearly: PostCSS is not actually a CSS preprocessor. Sass, the latter clearly has an edge with its easily readable code. What you get is a freedom-caused anarchy, so to speak.
Css procssor code#
Having no clear identifiers makes the code hard to read and understand, especially in bigger projects. Unfortunately, some developers actually find this flexibility to be a flaw. No big deal.Īll of this lets you type less and have a cleaner code. As for variables, you may use the $ sign like in Sass. Furthermore, you don't need curly braces to define code blocks: instead of symbols, Stylus uses indentations for that.
What makes Stylus distinct first and foremost is its flexibility: colons, semicolons, and commas are all optional. It also has useful built-in functions and mixins. Stylus is written in Node.js and is therefore an attractive option to those already familiar with the environment. While it has a noticeably smaller user base than Sass or Less, it's worth to have a look at. StylusĪnother CSS preprocessor called Stylus appeared on the market in 2010. This might cause a little confusion when reading the code. However, in CSS, can also be used for keyframes and media queries. Its syntax also contains ternary operators and nesting collectors – and Less, unfortunately, does not.Īnother little disadvantage of Less is that is uses the symbol for variable declaration (Sass uses the $ sign instead). On the other hand, Sass allows you to use if statements and interpolate them in selectors and property names. However, in Less, you can also hoist variables and extract certain components from a color that you could not with Sass – namely, hue, saturation, luminocity, and brightness. Both of them allow nesting, importing and using variables. Sass, we will see they are a lot alike in their basic functionalities. The Less CSS preprocessor itself is written in JavaScript, which also simplifies setup.Ĭomparing Less vs. Not only this meant a smoother learning curve, but you could also use any pre-written CSS code as valid in Less. Why? Because unlike the first version of Sass syntax, this CSS preprocessor was originally created with an intention to be as similar to pure CSS as possible. It was influenced by Sass, but had its own influence on the later introduced SCSS format. Less (Leaner Style Sheets) first appeared in 2009. However, SCSS is much easier to both learn and integrate to CSS. Some developers claim it's actually more readable due to being more concise. While SCSS is now officially the main syntax of the Sass CSS preprocessor, there are no plans to ever deprecate the original version. Sass, on the other hand, does not – plus, it uses an equals sign instead of a colon for assignment. The main difference between Sass and SCSS is that the latter uses semicolons and brackets in the same way CSS does. Therefore, they presented a new syntax called SCSS (Sassy CSS) in the third version. While only the first one existed in the first versions of the preprocessor, the team got worried it might be a bit too different from plain CSS. No wonder it is also the most popular! Sass is also used in Bootstrap 4, which is currently one of the most widely used front end frameworks in the world and thus a prominent trendsetter in the IT world.Īs of now, it has two separate syntaxes: Sass and SCSS. SCSSįirst introduced in 2006, Sass (Syntactically Awesome Style Sheets – a nice play on the official name of CSS) is considered to be the pioneer of CSS preprocessors.
To make a choice, you need to know your options, recognize their strengths, and understand differences. Just like with most information technologies, you have a variety of choices, each with its own advantages and a passionate user base. Which CSS preprocessor should you use?Ĭhoosing a CSS preprocessor is not an easy feat. The handy additional features let you be more efficient in your daily work and provide you extra scalability. For example, you could have nesting or inheritance selectors, as well as mixins (reusable declaration bundles). The reason we're using CSS preprocessors is to add extra functionalities that CSS wouldn't otherwise have.