CSS Preprocessors

What does a CSS Preprocessor do?

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. ... CSS preprocessors all do similar things but in a different way and with their own syntaxes

What are the advantages of using a CSS Preprocessor?

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

• Nested syntax.
• Ability to define variables.
• Ability to define mixins.
• Mathematical functions.
• Operational functions (such as “lighten” and “darken”)
• Joining of multiple files.

What are the disadvantages or issues you need to consider when using a CSS Preprocessor?

The disadvantages of CSS preprocessor:

• Debugging is harder.
• Compilation slows down development.
• They can produce very large CSS files.
• Maintainence and overengineering.
• Tooling and developer convenience.
• Saving generated files (or not)
• Capability and understanding.

List at least FIVE CSS Preprocessors currently available

1. SASS
2. Less
3. CSS-Crush
4. Myth
5. Clay

Research Web Development jobs and see how many of them list a CSS Preprocessor as one of their desired skills.

Out of the three "Web Developer" jobs I could find on Indeed, all three of the listings required "Experience with or using CSS preprocessor, such as SASS."

Go to Top