Zjednodušte si kódenie pomocou SASS

Počas štyroch rokov kódenia modulov, ako aj celých webových stránok v bart.sk, som vystriedal rôzne praktiky písania kódu. Začal som jednotkou px, compass mi otvoril bránu do sveta SASS, vytváral za mňa sprite ikonky alebo mi pomáhal písať prefixy pre vtedy nie všetkými prehliadačmi podporované CSS vlastnosti. Keď sa nad tým zamyslím, čísté ‚céesesko‘ som odvtedy napísal len zriedka.

SASS a jeho superpowers

Písanie kódu v CSS a SASS je veľmi podobné. Ak chcete kód migrovať do SASS, stačí nainštalovať hore spomínaný compass, Gulp či Grunt, nakonfigurovať kde sa má výsledný CSS kód generovať a prepísať koncovku súboru z *.css na *.scss. Na internete nájdete kopec návodov a techník, ako tieto nástroje fungujú. Zvoľte si také, ktoré vám najviac vyhovujú. Poďme si ukázať zopár jednoduchých, ale podľa mňa kľúčových výhod, ktoré nám SASSko ponúka.

Premenné (variables)

Potrebujete použiť jednu farbu pre odkazy či tlačidlá alebo nastavovať písmo vo viacerých elementoch? Riešenie je jednoduché. Stačí si zadefinovať premennú: $nazov-premennej: hodnota.

//scss
$primary-color: #26f;

a {
  color: $primary-color;
}

.button {
  background: $primary-color;
  color: #fff;
}

/*css*/
a {
  color: #26f;
}

.button {
  background: #26f;
  color: #fff;
}

Teraz stačí zmeniť farbu len na jednom mieste – v definícii premennej, a nastaví sa tak v celom kóde. Premenné pomenujte jednoznačne.

Nesting (vnáranie)

Asi najviac ma v CSSku nebavilo opakovať sa v písaní tej istej triedy pri viacerých akciách. V SASSku sa používa veľmi silný nástroj, ktorý sa zapisuje znakom & a predstavuje selector, triedu alebo id, v ktorom sa nachádza.

//scss
a {
  color: $primary-color;
  text-decoration: none;

  &:hover {
    background-color: $primary-color;
    color: #fff;
  }
}

/*css*/
a {
  color: #26f;
  text-decoration: none;
}

a:hover {
  background-color: #26f;
  color: #fff;
}

Dá sa však využiť aj trochu inak. Povedzme, že chcem zvýrazniť odkazy v navigácii, keď nad ňu prejdem kurzorom a keď prejdem kurzorom nad odkaz, zafarbiť aj samotný odkaz.

//scss
.navigation {
  …
}

.navigation__item {
  color: $navigation-idle-color;

  .navigation:hover & {
    color: $navigation-ready-color;
  }
}

.navigation__link {
  color: inherit;

  &:hover {
    color: $primary-color;
  }
}

/*css*/
.navigation {
  …
}

.navigation__item {
  color: #ccc;
}
.navigation:hover .navigation__item {
  color: #999;
}

.navigation__link {
  color: inherit;
}

.navigation__link:hover {
  color: #26f;
}

Príklad môžete vidieť na tomto odkaze.

@import

Určite ste sa v CSS stretli so zápísom @import url(„…“) (ktorý sa mimochodom kvôli rýchlosti načítania štýlov neodporúča používať). V SASSku sa podobný zápis používa veľmi často. Umožňuje nám totiž „rozbiť“ kód do menších súborov a tak je:

• prehľadnejší,
• rýchlejšie dohľadateľný,
• modulárny (určitú časť kódu môžeme skopírovať do iného projektu).

Nech sa „hlavný“ súbor volá style.scss (vo finále sa vygeneruje do style.css). Všetky čiastkové súbory pomenujeme s prefixom ‚_‘, aby sme preprocesoru povedali, že tieto súbory má ignorovať.

//style.scss

@import "variables";
@import "core";
@import "global-styles";
@import "plugins";
…

Do importu nemusíme písať celý názov _variables.scss, _core.scss,… Preprocesor si s tým poradí. Vo výsledku sa všetky drobné súbory spoja do jedného style.css.

Mixiny

Ďalšou skvelou výhodou sú mixiny. Tie nám umožňujú zadefinovať si kus kódu, ktorý môžeme použiť viackrát.

//mixiny
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//použitie
.nadpis {
  …
  @include ellipsis;
}

SASS nám toho ponúka veľa, určite si pozrite jeho dokumentáciu. A teraz prejdime k serióznym veciam.

Prečo nastaviť globálne font-size na em

Keď som sa prvýkrát stretol s jednotkmi em a rem, tak som si ich musel zakaždým prepočítavať a do komentára zapisovať hodnotu v px. Avšak začiatok môjho CSSka vyzeral nejak takto:

html {
  background: $background;
  color: $text-color;
  font-family: sans-serif;
  font-size: 16px;
}

Prehliadače nám umožňujú prispôsobiť si webovú stránku, či už priblížením alebo zmenou veľkosti písma. Ak je však veľkosť písma v px, nie je možné zmeniť veľkosť písma v jeho nastaveniach.

A preto odporúčam zadefinovať font-size v em.

html {
  background: $background;
  color: $text-color;
  font-family: sans-serif;
  font-size: 1em;
}

Vďaka tomu neobmedzujeme návštevníka a dovolíme mu prispôsobiť si stránku podľa seba.

Robte stránky pre návštevníkov, nie pre seba!

Rozdiel medzi em/rem

V kaskádových štýloch, jednotka em je výška písma v nominálnych bodoch alebo palcoch. Skutočná fyzická výška akejkoľvek danej časti písma závisí od nastavenia DPI definovaného používateľom, aktuálnej veľkosti písma a použitého písma. Ak chcete vytvoriť pravidlá štýlu, ktoré závisia len od predvolenej veľkosti písma, bola vytvorená ďalšia jednotka: rem. Rem alebo root em je veľkosť písma koreňového prvku dokumentu. Na rozdiel od em, ktoré môžu byť pre každý prvok odlišné, veľkosť rem je konštantná v celom dokumente.

– Em (typography), Wikipedia Ukážme si to na príklade:

html {
  font-size: 1em; /* =16px */
}

ul {
  font-size: 1.75rem; /* =28px */
}

li {
  font-size: 1em; /* =28px pretože sa vypočíta podľa rodiča ul */
  font-size: 1rem; /* =16px pretože sa vypočíta podľa html*/
}

Media queries

Ako príklad si vezmeme súbor pre vyhľadávaci formulár. Definovanie tzv. media breakpointu @media – šírky stránky, odkedy začne platiť iný kód napr. pre zväčšenie písma oproti mobilnej verzii stránky. Ten si môžeme zjednodušiť vytvorením @mixin-u.

//_search-form.scss
.search-form {
  display: none;
}

@media screen and (min-width: rem(568)) {
  .search-form {
    display: block;
    padding: rem(10);
  }
}

@media screen and (min-width: rem(768)) {
  .search-form {
    padding: rem(30);
  }
}

//_search-form.scss
.search-form {
  display: none;
}

@include mb(568) {
  .search-form {
    display: block;
    padding: rem(10);
  }
}

@include mb(768) {
  .search-form {
    padding: rem(30);
  }
}

Výhodou tohto zápisu je lepšia čitateľnosť vďaka kratšiemu zápisu.