SASS a LESS — konec CSS chaosu

CSS soubory v našich projektech dorůstaly tisíců řádků neudržitelného kódu. Duplikované barvy, opakující se vendor prefixy, nemožnost jakékoliv abstrakce. CSS preprocesory SASS a LESS přinesly řád do chaosu.

SASS vs. LESS¶

LESS má jednodušší syntaxi. SASS (SCSS) je mocnější — podmínky, smyčky, funkce. Bootstrap 3 používá LESS, ale komunita se posouvá k SASS. Zvolili jsme SCSS — nadmnožina CSS, takže migrace existujícího kódu je bezbolestná.

Proměnné a struktura¶

// _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%);
  }
}

Mixiny a organizace souborů¶

Vendor prefixy řešíme mixiny. Strukturu souborů inspiruje SMACSS: _variables, _mixins, _base, components/, layouts/, pages/. Jeden main.scss importuje vše.

Integrace do buildu¶

SASS kompilaci jsme integrovali do Maven buildu přes sass-maven-plugin. Při vývoji sass --watch pro okamžitou kompilaci.

Preprocesor je nutnost¶

Psát CSS bez preprocesoru v roce 2014 je jako psát Javu bez IDE. SASS nám přinesl čitelnější, udržitelnější a DRY stylesheets. Investice se vrátila během prvního týdne.