CSS was both a wonderful innovation and a missed opportunity. Being able to separate the form and the content of a webpage massively improves the process of web design. But, CSS has a number of limitations. As anyone who has ever written CSS knows, for all but the most simple of sites, the CSS can become a tangled mess of repetitions, overrides of previous CSS, and overrides of overrides. CSS does not conform to coding best practices, and its simplicity steps over the line from simple to simplistic, frequently hindering the design and development process.
Thankfully, CSS preprocessors provide us many of the features that would ideally have been included in CSS from the beginning. There are a number of different CSS preprocessors, with the most popular being SASS and LESS. There are significant differences between the two, but rather than looking closely at particular preprocessors, we’re going to have a look at how CSS preprocessors in general can change the way you think about writing CSS.
What Is A CSS Preprocessor?
Put simply, CSS preprocessor languages are more feature-rich than CSS alone and can be processed into CSS that works as normal.
As the name suggests, CSS preprocessors take a text file, process it, and output correct CSS. Exactly what that text file contains depends on the individual preprocessor, but both SASS and LESS are a superset of CSS. They include everything already in the CSS specification plus additional features. A major benefit of which is that if you know CSS, you can already write valid LESS and SASS, and just need to learn a few extra tricks.
Variables, Mixins, and Functions
CSS does not include variables. Anyone familiar with coding understands how useful variables can be. Variables allow web developers to assign a value to a name, which can then be used throughout the stylesheet. If you need to change the value, you only have to change it in one place, rather than hunting through all of the CSS files for every instance.
Mixins are slightly more complex. They allow for the properties of a class to be embedded in another class, which can then be used throughout the stylesheet, in much the same way as a variable. Functions are much as you would expect to find in any other programming language, although with some limitations.
It Will Make Your CSS DRY
“Don’t Repeat Yourself” is one of the foundational best practices of modern coding. With CSS alone it’s almost impossible to adhere to, but with SASS, LESS and the others, variables, mixins, and functions allow developers to write their styles in one place, and use them throughout their stylesheets.
CSS Preprocessors Will Save You Time
All of the inefficiencies in the way CSS is written and maintained take up a lot of developer time. Using a CSS preprocessor drastically simplifies the task of writing readable, maintainable CSS, which means developers and designers have more time to work on the really important stuff, like making the site look good.
If you’ve been avoiding CSS preprocessors, perhaps it’s time you gave them a look. They will save you time and they are very easy to learn for anyone already familiar with CSS.