O tom, čo je to SASS/SCSS, sme si už popísali. Dnes si povieme niečo viac o jeho funkcionalitách. V tomto článku vám tiež ukážem pár použiteľných mixins, ktoré osobne využívam takmer pravidelne.

V predchádzajúcom článku som vám popísal aký je rozdiel medzi SASS a SCSS, využitie premenných, mixins, matematických operácií, nesting, čiastočné súbory, import a v neposlednom rade aj priority. Tento článok je pokračovanie, a preto ak ste prvú časť ešte nečítali, určite odporúčam si ju otvoriť.

7. Dedičnosť

Ďalšia super vec, ktorá určite chýba v CSS, je dedičnosť. Pokiaľ už máme naštýlovaný nejaký element a ďalší bude mať rovnaký design, len s nepatrnými zmenami, funkcia @extend bude naším priateľom. Najlepším príkladom je využitie pri hláškach.

Takýto zápis vytvorí CSS ako je toto:

8. Selektor &

Veľmi užitočným prvkom je selektor & vo vnútri nesting tagu. Vtedy tento znak odkazuje na dopyt. Je jedno ako hlboko sa nachádza, vždy bude odkazovať na ten posledný (tzv. rodičovský). Použijem podobný kód ako v časti 7 - v tej časti príklad aplikuje štýly na všetky .success elementy. Lenže my chceme, aby sa štýl aplikoval na elementy .message.success, pretože triedu .success môžeme využiť napríklad samostatne pri tlačítkach, kde by mala mať iné štýlovanie. V tomto prípade budeme odkazovať na dopyt cez &:

Týmto spôsobom získame takéto CSS:

Pozor! Selektor & obsahuje cestu k rodičovi. Teda ak by ste vo vyššie spomenutom prípade použili omylom viac týchto selektorov, napríklad “& &.success”, tak výsledok by bol “.message .message.success”.

9. Placeholder

Pri dedičnosti ešte zostanem. V SASS existuje ešte jedna podobná vec - placeholder. Je to blok kódu so štýlmi, ktorý nemusí byť aplikovaný na žiaden dopyt. Volanie tohto placeholderu prebieha pomocou funkcie @extend.

Vytvorí CSS kód:

10. Interpolačné zátvorky

Interpolácia vyzerá asi takto: #{$premenna}. Teda môžete vytvárať dynamické selektory, alebo atribúty štýlov podľa premennej. Napríklad v jednej z mojich ukážkových mixins je táto interpolácia využitá. Jedná sa o mixin prefix. V cykle @each rovnako ako v programovacích jazykoch sa mení hodnota premennej, v mojom prípade to bol $vendor (obsahuje hodnoty -moz-, -webkit-, -ms-...). Pomocou interpolácie je možné reťazce spájať a vytvoriť tak dynamické názvy tried, či štýlov. Pre ukážku využitia pozrite mixin prefix.

11. Kompilátory

Na spracovanie nielen SASS/SCSS, ale aj Less či Stylus potrebujeme kompilátor, ktorý nám vytvorí CSS kód. A nielen to - dokonca ho skomprimuje, aby mal čo najmenšiu veľkosť a dokonca nám môže vytvoriť aj súbor .map, ktorý používajú prehliadače pri debugu v developer tools. Inak povedané, ak v developer tools skúmame jeho štýl, vedľa neho bude odkaz na zdrojový SCSS súbor s číslom riadku. Ale i tak by aspoň mne vyhovovalo najviac, ak by prehliadače natívne podporovali kód v SCSS.

Existujú kompilátory, ktoré v reálnom čase sledujú súbory a ihneď ich kompilujú. Ja osobne poznám len dva a preto nechcem hovoriť, či sú najlepšie. Prvý je Prepros. Ponúka neobmedzenú skúšobnú verziu. Môžete ho používať so všetkými funkciami, no zhruba každých 5-10 minút vám vyskočí ďakovná hláška s odporúčaním na plnú verziu na 29$.

Druhý kompilátor, ktorý najčastejšie používam, je Koala. Aj keď nemá moderný flat dizajn a nemá toľko funkcií ako Prepros, na jeho kvalite to určite neuberá. Jedná sa o freeware, takže je úplne zadarmo.

Nakoľko je SASS veľmi rozšírenou platformou štýlovania stránok, existujú aj online kompilátory, napríklad ak si chcete niečo vyskúšať. Stránka SassMeister ponúka takéto rozhranie. Osobne som využil túto stránku pri písaní tohto článku a dosadzovaní kódu.

Ako developer ste sa mohli stretnúť so stránkou jsFiddle, kde môžete napísať svoj kód a zdieľať ho s inými developermi v prípade potreby pomoci pri písaní kódu. Poprípade stránka CodePen, ktorú som využil v jednom z predchádzajúcich článkov, má tiež podporu SCSS. Náhľad z jsFiddle:

12. Príkladové mixins

Chcem sa s vami podeliť o zopár užitočných funkcií/mixins, ktoré sám používam. Niektoré som našiel na internete, niektoré som sám napísal a niektoré som našiel a upravil. Úprimne si už nepamätám, ktoré sú ktoré, pretože ich používam už veľmi dlho.

Prefix - tento mixin za vás doplní všetky potrebné prefixy a nemusíte žiadnu hodnotu písať viackrát

Použitie - @include prefix(názov_štýlu, hodnota);

Opacity - tento mixin za vás doplní priehľadnosť elementu s ošetrením pre Internet Explorer

Použitie - @include opacity(hodnota); // 0 - neviditeľný, 1 - plne viditeľný

Placeholder - nastaviť farbu placeholderu pre inputy nemusí byť jednoduché, hlavne kvôli prehliadačom. Je potrebné tento mixin zavolať v rodičovskom elemente, nie v inpute

Použitie - @include placeholder(farba, veľkosť_písma);

Grayscale - celý element sa stane čierno-biely

Použitie - @include grayscale(hodnota); // 0 - farebný, 1 - čierno-biely

Aspect ratio - je to troška komplikovanejší mixin. Prvá hodnota je šírka elementu. Druhá je pomer X a tretia je pomer Y. Napríklad pre element so šírkou 500px chceme nastaviť výšku v pomere 16:9. Namiesto počtov na kalkulačke použijeme mixin @include aspectRatio(500px, 16, 9);, ktorý všetku prácu odvedie za nás.

Použitie - @include aspectRatio(šírka, pomer_X, pomer_Y);

Avšak ja mám tento mixin upravený, pretože ho používam ako zväčšovač medzi elementami a teda kvôli responzivite používam percentá namiesto reálnych hodnôt. Týmto spôsobom už budem musieť využívať absolútne elementy (position: absolute), pretože vytváram výšku cez padding.

Keyframes - podobne ako mixin prefix, avšak pre keyframes/animácie

Príklad použitia:

Center - osobne potrebujem niekedy vycentrovať element presne na stred (absolútne, bez flex boxu) a tento mixin mi častokrát pomáha

Použitie - @include center();

Dúfam, že sa vám moje články (aj keď v dvoch častiach) páčili a možno aj pomohli s niečím ohľadne tohto štýlovania. Ospravedlňujem sa, ak sa objavili nejaké chybičky v pomenovaniach - som viac praktický človek a teória mi nikdy príliš nešla. Pokiaľ som na niečo zabudol, nebojte sa vyjadriť svoj názor v komentároch.