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

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

SASS - Vnáranie kódu (2)

Opäť bodujeme v rámci efektívnosti a prehľadnosti kódu.

Poďme na to

Ďalšou “neefektívnou” časťou CSS je opakované písanie rovnakých selektorov. SASS má aj na toto účinnú zbraň, vnáranie kódu. Často sa stane, že potrebujeme určiť štýl výhradne pre element v nejakom rodičovskom elemente. Ale čo v prípade, ak máme týchto elementov oveľa viac? Pozrime sa na príklad 2.1.

Príklad 2.1

.css

#header .content h1 { color: #222; }
#header .content a { color: #666; }
#header .menu { border: 1px solid #d2d2d2; }

V tomto príklade môžme vidieť, že sa nám často opakuje selektor “#header” a “.content”. Ak budeme chcieť neskôr upraviť kód a zmeniť selektor “#header” na “header”, budeme musieť upraviť tento selektor na všetkých miestach. Vďaka SASS a vlastnosti vnárania kódu to bude oveľa jednoduchšie (Príklad 2.2).

Príklad 2.2

.scss

#header {
  .content {
    h1 { color: #222; }
    a  { color: #666; }
  }

  .menu { border: 1px solid #d2d2d2; }
}

Ako vidíme, stačí upraviť jeden selektor a hotovo :). Tento kód určite prída aj na prehľadnosti, je ale možné, že ak ste naučení na starší spôsob, môže to chvíľku trvať kým si zvyknete. Pravidlo vnárania kódu nie je obmedzené iba na vnárané selektory ale selektor “#header” môže obsahovať aj obyčajné CSS vlastnosti (Príklad 2.3).

Príklad 2.3

.scss

#header {
  background-color: #ccc;

  .content {
    h1 { color: #222; }
    // ...
  }
}

Troška odbočím. V tomto príklade som použil tzv. Tichý komentár “// ...”. Tichý preto, lebo nám slúži hlavne na organizáciu a prehľadnosť kódu SASS. Ak si neželáme, aby boli tieto komentáre súčasťou výstupu CSS, použijeme práve tento zápis komentára. V inom prípade môžme použiť bežný CSS komentár “/* … */”.

Odkazujeme sa na rodičovský selektor

Keď SASS kompiluje vnorený kód, tak pred vnorené selektory(.content, .menu) jednoducho pridá rodičovsky selektor s medzerou(#header .content, #header .menu). Ak potrebujeme naštýlovať pseudo element alebo pseudo triedu, ako napríklad “:hover”, nebude nám to fungovať (Príklad 2.4).

Príklad 2.4

.scss

a {
  color: #adadad;
  :hover {
    color: #666;
  }
}

.css

a { color: #adadad; }
a :hover { color: #666; }

SASS jednoducho berie tento zápis resp. “:hover” ako potomka a výstup bude “a :hover”. Preto použijeme špeciálny rodičovský selektor “&” (Príklad 2.5).

Príklad 2.5

.scss

a {
  color: #adadad;
  &:hover {
    color: #666;
  }
}

.css

a { color: #adadad; }
a:hover { color: #666; }

Tento “&” SASS selektor je jednoducho nahradený za rodičovský selektor “a”.

Vnáranie skupín selektorov

Ak potrebujeme definovať pre určitú skupinu selektorov rovnaké vlastnosti v rámci nejakého rodičovského selektora, jednoducho túto skupinu selektorov vnoríme do rodičovského selektora (Príklad 2.6).

Príklad 2.6

.scss

.content {
  h1,
  h2,
  h3 {
    color: #222;
  }
}

.css

.content h1,
.content h2,
.content h3 {
  color: #222;
}

Vnárame kombinátory (>, +, ~)

Pri kombinátoroch je to s vnáraním rovnaké (Príklad 2.7).

Príklad 2.7

.scss

#header {
  > a {
    color: #222;
  }
}

.css

#header > a { color: #222; }

Vnárame vlastnosti

CSS selektory nie sú jediné na čo môžme využiť vnáranie. Taktiež môžme vnárať vlastnosti. Túto možnosť však nebudeme využívať tak často ako pri selektoroch (Príklad 2.8).

Príklad 2.8

.scss

#header {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

.css

#header {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

Musím ale podotknúť, že je určite jednoduchšie zapísať tento príklad ako "border: solid 1px #ccc;", ale sú prípady, kedy je to užitočné. To Vám ale prezradím troška neskôr :).

Záverom

Ako sme sa mohli opäť presvedčiť, tak nám SASS ponúka ďalšiu skvelú vlastnosť, ktorou je vnáranie kódu. Asi nám neuľahčí toľko písania ale rozhodne zvýši prehľadnosť a udržovateľnosť nášho kódu. V ďalšej časti sa môžme tešit na čiastočne súbory a import, ktoré nám umožnia si rozdeliť našu aplikáciu do logických celkov a udržiavať si v nej poriadok :).

Späť na časť SASS - CSS Premenné (1).

Prejsť na ďalšiu časť SASS - Čiastočné súbory a import (3)

Hodnoť článok:
2 0

0 komentárov 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

Zajtra.sk > Programovanie > CSS/HTML > SASS - Vnáranie kódu (2)


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