Ako vytvoriť elegantné CSS s Compass a Sass

compass-sass

Mnoho web dizajnérov používa nejaký CSS pre-procesor, či už je to Sass, LESS alebo Stylus. Ak ste niekedy použili niektorý z nich, budete pravdepodobne vedieť, že Compass je framework postavený na Sass. Možno jeho inštalácia sa môže zdať zložitá – akonáhle ho použijete, rýchlo zistíte, že je to jeden z najlepších nástrojov, ktorého schopnosti sa môže akýkoľvek web designer naučiť.

Compass funguje ako framework pre vaše CSS. Keď pracujete na veľkom projekte – ľahko sa vám môžu niektoré veci vymknúť z rúk a často nájsť potrebné riadnky kódu vo vašom vlastnom CSS je výzvou. Compass sa snaží tieto problémy riešiť – s pridanou hodnotou uľahčenia vašej práce.

Čo je Compass?

Compass je framework pre vaše CSS, ktorý rieši niektoré problémy s jazykom a váš kód robí prehľadným a pružným. Obsahuje niekoľko nástrojov, aby vývoj prebiehal rýchlejšie a jednoduchšie:

  • rovnako ako Sass – Compass podporuje premenné a dátové typy
  • poskytuje celý rad pomocných funkcií pre obrázky, farby, typografie
  • porovnávanie nad číslami, znakmi, reťazcami alebo farbami
  • vnáranie štýlov
  • podporuje matematické výpočty
  • podporuje cykly
  • pomáha zaistiť kompatibilitu medzi prehliadačmi (cross-browser compatibility)

Rovnako ako Sass a LESS – Compass je len nástroj, aby sa dizajn webových stránok robil jednoduchšie.

Ako nainštalovať Compass

Compass je Ruby gem, takže aby ste ho mohli nainštalovať a používať – musíte mať najskôr nainštalované Ruby vo vašom počítači. Našťastie inštalácia Ruby je jednoduchá, vo Windows stačí stiahnuť Ruby inštalátor pre Windows, na Mac / Linux postupujte podľa pokynov na webe Ruby.

Potom, čo ste nainštalovali Ruby, inštalácia Compass je rovnako jednoduchá:

gem install compass

Týmto nainštalujeme spoločne Compass a Sass.

Ak chcete vytvoriť Compass projekt, mali by ste zadať:

compass create /path/to/project
cd /path/to/project
compass watch

Tieto tri riadky znamenajú, že kedykoľvek zmeníte Sass súbor – tieto zmeny sa automaticky vygenerujú do CSS.

Začíname s Compass

Compass je rozdelený do modulov  a aby sme začali používať jeho nástroje, musíme najskôr importovať modul, ktorý chceme do nášho hlavného .scss súboru. Ak chceme napríklad importovať CSS3 modul – urobíme to nasledovne:

@import "compass/css3";

Teraz môžeme začať používať nástroje, keďže Compass ponúka nové vlastnosti, ktoré prišli s CSS3. Najlepšia vec na tom je, že nemusíme písať prefixy prehliadačov znova a znova, ktoré boli vždy problém s príchodom CSS3.

Napríklad: ak by sme chceli vytvoriť jednoduché rozloženie textu na 3 stĺpce s 20px medzerou, v CSS by sme museli zadať:

div
{
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        -webkit-column-gap:20px;
        -moz-column-gap:20px;
        column-gap:20px;
}

Môžeme vidieť, aký je náš kód so všetkými predponami zbytočne zložitý. S pomocou Compass a Sass to ide oveľa jednoduchšie:

div
{
        @include column-count(3);
        @include column-gap(20px);
}

Odstránili sme predpony (prefixy) prehliadačov a to, čo sme napísali 6 riadkami v CSS – sme dosiahli len v 2 riadkoch.

Ďalším príkladom z klasického CSS, ktorý vyžaduje veľa písania – sú gradienty (prechody farieb). Tu je príklad, ako si vytvoriť jednoduchý farebný prechod z bielej po čiernu v CSS:

.gradient
{
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
        background-image: -webkit-linear-gradient(#ffffff, #000000);
        background-image: -moz-linear-gradient(#ffffff, #000000);
        background-image: -o-linear-gradient(#ffffff, #000000);
        background-image: linear-gradient(#ffffff, #000000);
}

Na vytvorenie rovnakého efektu s Compass a Sass potrebujeme:

.gradient
{
        @include background-image(linear-gradient(#fff, #000));
}

Nielen, že sme výrazne znížili množstvo kódu, ale ak chceme zmeniť farby – v Compass ich stačí zmeniť len raz.

K dispozícii je úplný zoznam skrátených vlastností CSS3.

Compass tiež zahŕňa niektoré pomôcky pre odkazy / linky. Opäť musíme najskôr importovať modul typografie na začiatku nášho hlavného Sass súboru:

@import "compass/typography"

S modulom Typografia môžeme skrátene definovať farby odkazov:

a
{
        // link colors (normal, hover, active, visited, focus)
        @include link-colors(red, blue, grey, red, blue);
}

To je tá najlepšia vec, ktorú Compass ponúka. Často používaný kód môžeme napísať v skrátenom tvare, ktorý je kompatibilný naprieč prehliadačmi.

Záver

Tento článok bol len rýchly úvod do Compass a Sass, ale ak vás Compass zaujal a objavili ste v ňom určité výhody – doporučujem navštíviť ich webové stránky a zoznámiť sa s ďalšími možnosťami, ktoré tento framework ponúka.

Dúfam, že v budúcnosti zvážite použitie Compass a Sass vo svojich projektoch, pretože v skutočnosti to sú neuveriteľné užitočné nástroje pre web dizajnérov.