Using CSS Preprocessing to Speed Up Development

Using CSS Preprocessing to Speed Up Development
As websites become more complex and designs break the boundaries of standard HTML, we are seeing a rise in the use of CSS preprocessors. CSS preprocessing allows developers to write clean code in a programming language, rather than static syntax. The preprocessor rewrites this code into the CSS. This process greatly increases development workflow and reworks how developers think about CSS.

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.

TBH Creative

About the author | TBH Creative

TBH Creative is an award-winning marketing company specializing in web design/development, digital strategy, inbound marketing, and reporting. Since 2004, we’ve built multi-dimensional digital marketing campaigns and complex, enterprise-level websites for clients in a wide range of industries.

We believe in communicating clearly, delivering excellence, and beating deadlines. But beyond those ideals, what really drives the heart of our business is your business—helping our clients achieve more with comprehensive digital marketing and web design.

Our Indianapolis web design company is WBE-certified in the state of Indiana and the city of Indianapolis, and we’re also a Hubspot-certified inbound marketing agency.

View more posts by TBH Creative

Previous The importance of the call to action Next What comes first the design or the content?

Receive articles in your inbox