SASS und LESS — Das Ende des CSS-Chaos

CSS-Dateien in unseren Projekten wuchsen auf Tausende Zeilen unwartbaren Codes an. Duplizierte Farben, wiederholte Vendor Prefixes, keine Möglichkeit jeglicher Abstraktion. Die CSS-Preprozessoren SASS und LESS brachten Ordnung ins Chaos.

SASS vs. LESS¶

LESS hat eine einfachere Syntax. SASS (SCSS) ist mächtiger — Bedingungen, Schleifen, Funktionen. Bootstrap 3 nutzt LESS, aber die Community bewegt sich Richtung SASS. Wir wählten SCSS — eine Obermenge von CSS, sodass die Migration bestehenden Codes schmerzlos ist.

Variablen und Struktur¶

// _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 und Dateiorganisation¶

Vendor Prefixes werden mit Mixins gehandhabt. Die Dateistruktur ist von SMACSS inspiriert: _variables, _mixins, _base, components/, layouts/, pages/. Eine main.scss importiert alles.

Integration in den Build¶

Wir integrierten die SASS-Kompilierung über sass-maven-plugin in den Maven-Build. Während der Entwicklung sass --watch für sofortige Kompilierung.

Ein Preprozessor ist eine Notwendigkeit¶

CSS ohne Preprozessor zu schreiben ist 2014 wie Java ohne IDE zu schreiben. SASS brachte uns lesbarere, wartbarere und DRY Stylesheets. Die Investition hatte sich innerhalb der ersten Woche amortisiert.