SASS and LESS — the end of CSS chaos

CSS files in our projects were growing to thousands of lines of unmaintainable code. Duplicated colours, repeated vendor prefixes, no possibility of any abstraction. CSS preprocessors SASS and LESS brought order to the chaos.

SASS vs. LESS¶

LESS has a simpler syntax. SASS (SCSS) is more powerful — conditionals, loops, functions. Bootstrap 3 uses LESS, but the community is moving towards SASS. We chose SCSS — a superset of CSS, so migrating existing code is painless.

Variables and structure¶

// _variables.scss
$primary-color: #2c3e50;
$font-stack: 'Open Sans', Helvetica, sans-serif;
$spacing-unit: 8px;

.btn-primary {
  background-color: $primary-color;
  padding: $spacing-unit * 2 $spacing-unit * 4;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Mixins and file organisation¶

Vendor prefixes are handled with mixins. File structure is inspired by SMACSS: _variables, _mixins, _base, components/, layouts/, pages/. One main.scss imports everything.

Integration into the build¶

We integrated SASS compilation into the Maven build via sass-maven-plugin. During development, sass --watch for immediate compilation.

A preprocessor is a necessity¶

Writing CSS without a preprocessor in 2014 is like writing Java without an IDE. SASS brought us more readable, more maintainable, and DRY stylesheets. The investment paid off within the first week.