spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Marek 31.5.2014
Hodnoť článok:
2 0

SASS - Selektorová dedičnosť (5)

Znovu použiteľnosť kódu pomocou dedenia štýlov.

Čo je selektorová dedičnosť

Posledná doležitá metoda pre opätovné využitie kódu sa nazýva selektorová dedičnosť. Táto metóda nám umožňuje dediť štýly z jedného selektora do druhého. Definujeme ju pomocou direktívy @extend a následne názvom selektora, z ktorého chceme dediť (Príklad 5.1).

Príklad 5.1

.scss

.notice {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
}

.notice-big {
  @extend .notice;
  border-width: 3px;
}

.css

.notice, .notice-big {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
}

.notice-big {
  border-width: 3px;
}

Do triedy “.notice-big” sme podedili všetky štýly z triedy “.notice”, to znamená, že HTML element s atribútom “class=’notice-big’” bude mať štýly ako keby mal atribút “class=’notice notice-big’”. Táto dedičnosť sa ale neaplikuje len na samotný “.notice” selektor ale aj na iný selektor v spojení s “.notice” (Príklad 5.2).

Príklad 5.2

.scss

.notice {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
}

.notice a {
  text-decoration: none;
}

p.notice {
  font-weight: bold;
}

.notice-big {
  @extend .notice;
  border-width: 3px;
}

.css

.notice, .notice-big {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
}

.notice a, .notice-big a {
  text-decoration: none;
}

p.notice, p.notice-big {
  font-weight: bold;
}

.notice-big {
  border-width: 3px;
}

Ako dedičnosť funguje

Dedičnosť nie je jednoduché vloženie rovnakých štylov, ako to je pri premenných a mixinoch. Základnou ideou pri direktíve @extend je, že ak selektor ".big-notice" rozširuje selektor ".notice", tak všade v štýloch kde sa objaví trieda ".notice", bude vložená trieda ".big-notice", ako sme mohli vidieť v CSS výstupe príkladov 5.1 a 5.2. V jednoduchosti povedané, vytvorí sa multiselektor.

Rozšírena dedičnosť

Každé CSS pravidlo môže používať direktívu @extend a každé pravidlo môže byť rozšírené. Vo väčšine prípadov budete využívať dedičnosť jednej triedy, ale môžte rozšíriť aj samotný HTML element (Príklad 5.3).

Príklad 5.3

.scss

a { text-decoration: underline; }

.disabled {
  color: #666;
  @extend a;
}

.css

a, .disabled {
  text-decoration: underline;
}

.disabled {
  color: #666;
}

V prípade, že direktíva @extend rozširuje komplexnejší selektor, budú sa štýly aplikovať len na element, ktorý zodpovedá danému selektoru. Ak máme napríklad triedu ".big-error", ktorá rozširuje(@extend) selektor ".warning.error", bude dediť štýly iba pre ".warning.error" alebo "p.warning.error", ale nie pre samotné ".warning" a ".error". Ak je selektor "#content .error", ktorý rozširuje ".big-error" tak iba element ".error" v rámci elementu "#content" bude dediť štýly triedy ".big-error". Na element ".error" mimo "#content" nebudú tieto štýly aplikované.

Direktíva zástupný symbol - placeholder (%)

Často sa Vám stane, že budete dediť štýly z nejakej triedy ale túto triedu samotnú v CSS nebudete využívať. Na to, aby sa nám táto trieda zbytočne nevytvárala vo výslednom CSS, použijeme placeholder % (Príklad 5.4).

Príklad 5.4

.scss

%notice {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
}

.notice-big {
  @extend %notice;
  border-width: 3px;
}

.css

.notice-big {
  background: #666;
  border: 1px solid #222;
  font-weight: normal;
  border-width: 3px;
}

Kedy použiť dedičnosť a kedy mixiny

V niektorých ohľadoch sú mixiny podobné ako CSS triedy. Obe metody totiž umožňújú pomenovať bloky štýlov, a niekedy je zmätok v tom či použiť mixiny alebo triedy. Najdoležitejší rozdiel medzi mixinom a triedou je v tom, že triedy sú určené pre použitie v HTML, zatiaľ čo mixiny pre použitie v rámci CSS.

Mixiny by mali byť “prezentačné”, čiže určujú ako má vyzerať pravidlo v CSS. Triedy by mali byť “sémantické”, čiže označujú význam elementu. Ako sme mali v príklade 5.2, “.notice” je sémantický názov triedy, čiže určuje význam elementu, na rozdiel od mixinu, ktorý hovorí len o vizuálnom štýle (“border-radius”), ako bolo v časti o mixinoch.

Ešte jeden rozdiel nastáva v tom, že vďaka @extend sa vytvára multiselektor ako v príklade 5.2(“.notice a, .notice-big a”), ale @include by vytvoril samostatné selektory s rovnakou vľastnosťou, čo už odbočuje od našej filozofie DRY pri sémantických prvkoch.

Záverom

Dedičnosť nám umožňuje definovať vzťah medzi sémantickými triedami a používať tento vzťah na udržiavanie čistého, sémantického a dobre udržovateľného CSS. Dôležité je si uvedomiť rozdiel medzi mixinom a selektorovou dedičnosťou. Samozrejme môžte dedičnosť a mixiny kombinovať. V následujúcej a zrejme poslednej časti sa pozrieme na operátory, funkcie, podmienky, cykly atď.

Späť na časť SASS - Mixiny (4).

Prejsť na ďalšiu časť SASS - Operátory, funkcie, cykly a iné (6).

Hodnoť článok:
2 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Michal Marek 1.6.2014 18:07:16
@Pavel Straka
V princípe áno, SASS a LESS sú v veľmi podobné, až na nejaké odlišnosti v syntaxi a pod.
0 0 Pavel Straka 1.6.2014 11:54:33
Děkuji, za skvělé tutoriály. Lze použít i návody v případě používání less ?
Zajtra.sk > Programovanie > CSS/HTML > SASS - Selektorová dedičnosť (5)


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama