JavaScript Programming: Pushing the Limits

Appendix

CSS Preprocessing with LESS

It may seem a bit strange to talk about CSS in a JavaScript book, but preprocessing with LESS is hardly your standard CSS. LESS adds some of the familiar traits of a dynamic language that you can use to write efficient CSS, allowing you to compile your app's CSS with JavaScript. This preprocessor enables you to build CSS with variables, functions, and all the other features you've always wanted to use in CSS. LESS speeds up the development process and also makes stylesheets more organized and easier to maintain.

In this appendix, you find out why you should be using CSS preprocessing and how to install an automated LESS compiler. Then you learn the basics of LESS, including variables, operators, and nesting. You also discover how to use functions and custom mixins. Finally, you structure your LESS and organize it into separate files.

Introducing LESS

LESS allows you to script your CSS with custom variables and functions. Then the scripted LESS file is compiled to static CSS before it ever reaches the browser, which means you can use scripting in your CSS development efforts but still serve regular old browser-friendly CSS to your users. Additionally, if you decide to move away from LESS, you can simply start developing with the generated CSS file. Thus, there's really no loss to using a preprocessor.

What's So Good About Preprocessing?

CSS preprocessing has a number of advantages, all of which boil down to speeding up development and organizing ...