CSS3 Pushing the Limits

Chapter 14

Using Preprocessors to Push CSS3 to the Limit

CSS is renown for its simplicity and low entry barrier, offering a relatively gentle learning curve as far as the basics are concerned. However, this level of simplicity is a result of trade-offs in terms of scope and functionality, the frustrations from which are all too familiar to experienced web designers. A common example of a feature from the wish lists of front-end developers is the capability to specify variables, the benefits of which are evident if you're familiar with programming languages such as PHP; if you're not, sit tight because I discuss their uses further into the chapter.

Variables are actually being introduced to native CSS and are currently at the working draft stage of development (you can read more details on CSS variables in Chapter 16), but in the meantime, you can tackle the need to specify variables with the help of CSS preprocessors.

As well as variables, CSS preprocessors address a whole host of other limitations and restrictions imposed by standard CSS, and provide a method of writing stylesheets with all the flexibility and functionality you've ever dreamed of (and a whole lot more)! And they do all this before processing the code into a standard CSS stylesheet that browsers can recognize and deal with as normal.

This chapter addresses what exactly preprocessors are and why they exist before exploring some of the more popular preprocessors around in terms of what they're capable of and their ...