Preprocesory CSS

Każdy frontend’owiec na pewnym etapie swojej przygody z css, napotka pojęcie preprocesor. Ułatwiają one bardzo pracę nad stylowaniem strony, a na pewno ją przyspieszają, co z kolei ma duży wpływ na wydajność. Oczywiście, aby zacząć korzystać z preprocesorów należy swobodnie władać czystym css.

Preprocesory CSS - Wstęp

Przedstawienie

W tym wpisie postaram się jedynie przedstawić zarys 2 najpopularniejszych preprocesorów, jakie są obecnie używane.

  1. SASS
    Zaczniemy od najbardziej znanego – Sass. Wymaga on Ruby i prawdopodobnie jest najbardziej znamym preprocesorem CSS. To dobrze ugruntowany, 8-letni projekt open source, który jest dostępny w dwóch wersjach składniowych – scss (szęściej używana) i sass.

    Przykład kodu w składni scss:
    $serif-font-stack: "Georgia", "Times New Roman", serif; $monospace-font-stack: "Cousin", "Courier"; body { font: normal 18px/22px $serif-font-stack; } pre, code { font: 600 bold 18px/22px $monospace-font-stack; } div { &.row { width: 100%; display: block; } }

    Jak powyższy kod będzie wyglądał po skompilowaniu do czystego css?
    body { font: normal 18px/22px "Georgia", "Times New Roman", serif; } pre, code { font: 600 bold 18px/22px "Cousin", "Courier"; } div.row { width: 100%; display: block; }
    Proste, prawda?
  2. Less
    Drugim z preprocesorów, jaki chcę przedstawić jest Less. Zasada jest bardzo podobna do Sass, jednak są pewne różnice. Podstawową jest brak wymogu Ruby, jednak kompilacja może odbywać się zarówno przez npm (Node.js), jak i po stronie klienta za pomocą javascript’u. Czas na przykład:
    @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }

    Powyższy kod będzie wyglądał po skompilowaniu następująco:
    .box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

Oba narzędzia postaram się opisać dokładniej w osobnych wpisach, aby móc pokazać ich możliwości.