Using CSS Preprocessing to Speed Up Development

Why use CSS preprocessors?
CSS preprocessors do not break browser compatibility. It is the same CSS we are used to seeing. The only thing that has changed is how we write it and begin our development process.

Preproccesors allow developers to create reusable CSS properties by defining variables, thus making code more modular and scalable. For example, if a primary color of a website is #0000FF (blue) and it is time to start styling elements, we only need to define the color as “Primary Blue” and all elements with the “Primary Blue” syntax will have the same color applied. This becomes very useful for those times when we need to make quick updates across many HTML elements and pages. These variables can also be applied to font families, font sizes, borders, background-colors, and more.

The example shows how we declare the variable for “Primary Blue,” how it is written in SCSS, and then, how it is generated back into CSS.

SCSS $primary-blue: #0000FF; $spacing: 5px; a {   color: $primary-blue;   padding: $spacing;  }

Generated CSS a {   color: #0000FF;   padding: 5px; }

Mixins and nesting
Another advantage is CSS becomes more manageable. Sifting through lines—and pages—of CSS can be tedious. CSS preprocessors makes this more manageable by allowing nested selectors, referencing parent selectors and identifying ‘base’ selectors like color and font. Additionally, we can use mixins to group styles, vendor prefixes and easily reuse these blocks of code. The code sample below shows an example of nesting.

SCSS #primary-nav {   display: block;   padding: 10px;     a {        color: #FFF;        display: inline-block;        padding: 5px;           &:hover {           color: $primary-blue;           }      } }

Generated CSS #primary-nav {   display: block;   padding: 10px; } #primary-nav a {   color: #FFF;   display: inline-block;   padding: 5px; } #primary-nav a:hover{   color: #0000FF; }

Types of CSS preprocessors
The three most popular types of CSS preprocessors are LESS, Sass, and Stylus. Although each have their own syntax, they all follow the same parameters with nesting, mixins, and declaring variables. In a survey conducted by CSS-Tricks, 54% of people have tried or currently use a CSS preprocessor. Of the 54%, 83% of people have a preference of which syntax they choose to use. Here is the full list of results from the survey.  Below are a few resources that will help you determine which may be the right fit for your development team.

LESS
A Comprehensive Introduction to LESS

Sass
Intro to Compass/Sass

Stylus

CSS preprocessors are a way to add functionality to your CSS with mixins and variables. This workflow greatly increases productivity, is more maintainable and creates a more scalable website.