CSS Preprocessors

Cascading style sheet preprocessors are languages written for the sole purpose of adding inventive features to CSS without breaking browser compatibility. Preprocessors do this by compiling the code we write into regular/functional CSS which can be understood by all browsers. The most popular CSS preprocessors are SASS and LESS; this website was created via SASS.

Variables

Variables add a lot of value to developers code, in terms of maintainability, and in cases where developer is required to make app wide changes in a single instance. Variables allow storing of any value and can later be reused. This allows the developer to specify certain values in one location and if they need changed, must only be updated once.

Mixins

Mixins are functions that allow the reuse of properties throughout a stylesheet. Rather than having to go throughout a stylesheet and change a property multiple times, developer can adjust changes to a mixin. When mixins are called from within a CSS selector, the mixin arguments are recognized and the styles inside the mixin are applied to the selector.

Importing

Within the CSS community, importing multiple CSS files is frowned upon as it requires multiple HTTP requests. In a large CSS project it is important to keep your code in defined sections; preprocessors allow a developer to import multiple files into a single index which will also output a single .CSS file.

References:

• http://www.nosleepforsheep.com/development/using-a-css-preprocessor/
• http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained
• http://www.1stwebdesigner.com/power-sass-why-use-css-preprocessors/
• http://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-24320