A question: what do SASS, Stylus, Haml, and Less all have in common?
The answer is, they are all compilers, source to source compiling, or transpilers (to give them their official name), that have been around since the 1980s. They have appeared in many different formats, with Digital Research's XLT86 being one of the earliest versions, dating from 1981.
More recently, the well-known SASS processor arrived in 2006; this was followed by Less, created by Alexis Sellier in 2009. Both work in a similar fashion: they take a set of rules and compile it into valid CSS. We can extend CSS with all manner of features, such as variables, mixins, functions, and more. Although processors may not help cut down the physical number of lines we have to write, they help us reorganize code into more manageable blocks that we can reuse in future projects, which helps make CSS easier to maintain.
But, as is nearly always the case, there are some drawbacks to using processors:
There is nearly always a dependency involved, in some form or other—with SASS, it's Ruby; if you're using Less, it's a library, even though it is written in JavaScript
Our project may only use a small amount of preprocessed code, yet we are forced to rely on what can be a large library, such as SASS
Processing style sheets using a preprocessor is slow; it may only be a few seconds, but this builds up over time to become a significant amount of time spent waiting for processes to complete
Hmm, this doesn't make processing so attractive! But what if there were a way to alleviate all of these issues, and remove the need for dependencies at the same time?
Well, there is: let's build our own processor! Okay, this might sound a little crazy, but as someone once said, there is method in this madness, so bear with me while I explain why this may be a better option.