CSS Preprocessors

CSS preprocessors are an extension to CSS, that are a form of scripting language, which can be compiled in to regular CSS. Like other programming and scripting languages, they incorporate features such as variables, operators and functions, which facilitate the reuse of code, to minimise duplication. For example, if there are a number of CSS rules that are the same in several classes, these only need to be written once and then included in all the classes. This makes the code easier to maintain. Other programming concepts that are available with a CSS preprocessor include, decision making with 'if' statements and loops, where something needs to be repeated a number of times. Using a preprocessor also makes it very easy to modularise the CSS, making it simple to reuse across different projects.

Sass

Sass is one of the most popular and well-known CSS preprocessors, which has been around since 2006. It extends CSS with features such as variables, nested rules, mixins, math operations, and more. Sass includes two different syntaxes, or coding styles, the original, called the indented syntax, together with the newer SCSS syntax, which more closely resembles CSS, with its use of curly braces to denote code blocks and semi-colons separating lines within a block.

How Tos and Useful Stuff

• Official Sass website.
• Installing Sass.
• Sass features and syntax.
• Guide to Sass basics.
• Using source maps with Sass 3.3.
• Sass coding tools:
  • CodePen.
  • SassMeister.
• Sass layout tools:
  • Susy.
  • Breakpoint.
  • Bourbon Neat.
• Sass mixin libraries:
  • Bourbon.
  • Compass.
• Sass references:
  • The Sass Way.
  • Sass Break.
• Sass compilation:
  • Koala.
• How to structure media queries in Sass.

Other CSS Preprocessors

• Clay.
• CSS-Crush.
• DtCSS.
• LESS.
• Myth.
• Rework.
• Stylus.
• Switch CSS.