Zagnieżdżanie stylów

Jak już zapewne wiesz w CSSie klasę do której chcesz się odwołać możesz zapisać tak:

123 body.header-sectionp{//KOD}

Powyższy zapis oznacza, że chcesz się odwołać do elementu<p>, który znajduje się w elemencie o klasie.header-section, a ten zaś jest dzieckiem elementu<body>. Niestety w praktyce używając takiego zapisu w CSSie linie kodu stają się bardzo długie. Łatwo pogubić się w elementach do których chcesz się tak naprawdę odwołać, a o wcięcia w kodzie (dla zwiększenia czytelności) musisz zatroszczyć się sam. W innym przypadku kod stanie się bardzo nieczytelny.

Z pomocą przychodzi nam właśnie preprocesor CSS taki jak SASS. Powyższy kod można zapisać w ten sposób:

1234567 body{.header-section{p{// KOD}}}

Powyższy przykład jest bardziej czytelny niż poprzedni zapisany w standardowym CSSie. Jeszcze większą różnicę zobaczymy w poniższym przykładzie:

12345 body.header-section{…}body.header-sectionp{…}body.content{…}body.contenth1{…}body.contenth2{…}

A to jest ten sam kod zapisany w SASSie:

1 2 3 4 5 6 7 8 9101112 body{.header-section{…p{…}}.content{…h1{…}h2{…}}}

Prawda, że o wiele czytelniej? Od razu, na pierwszy rzut oka wiadomo, który element jest rodzicem, a który dzieckiem. W prosty i przejrzysty sposób mamy widok na całe drzewo elementów.

Zagnieżdżenie media query

Pójdźmy zatem dalej. RWD czyliResponsive Web Design. Dzisiaj jest to bardzo szeroko stosowana technologia w tworzeniu stron, ponieważ w coraz większym stopniu użytkownicy odwiedzają strony na urządzeniach mobilnych. Znając CSS wiesz pewnie, że kluczową kwestię odgrywa tutaj znacznik@media. W CSSie zazwyczaj na dole pliku zapisuje się media z danym breakpointem i wypisuje się zmiany we wszystkich elementach strony. Jest to nieco męczące, bo musimy szukać jednego elementu w kilku miejscach kodu. Jak to wygląda w SASSie?

1 2 3 4 5 6 7 8 91011 $screen-md-max:991px;$red:#F00;$green:#0F0;.header-section{background-color:$red;@mediaalland(max-width:$screen-md-max){background-color:$green;}}

Jak łatwo zauważyć media query możemy zawrzeć wewnątrz elementu. Będzie ono dotyczyć zawsze tylko elementu nadrzędnego. Dodatkowo w ciele znacznika@mediamożemy umieścić inne elementy, które są dziećmi elementu nadrzędnego. Dzięki temu zachowujemy czytelność i porządek w kodzie. Dodatkowo bardzo przydają nam się tutaj zmienne w których możemy zdefiniować punkty załamania layoutu, tak, aby nie było ich zbyt wiele i żeby się w nich nie pogubić. Bardzo polecam stosowanie zmiennych z frameworka Bootstrap, nawet jeśli z niego nie korzystamy w projekcie. Są one bardzo przemyślane i zazwyczaj w dużej mierze sprawdzają się w praktyce.

Odwołanie do elementu nadrzędnego

Powyższe zapisy, które przedstawiłem, dotyczą tylko elementów - dzieci. A co w przypadku gdybyśmy chcieli zapisać w SASSie taki kawałek stylu?

123 input[type="text"].error{…}

Możemy to zrobić w bardzo prosty sposób. Z pomocą przychodzi nam symbol&. Za pomocą tego symbolu możemy odwołać się do elementu nadrzędnego. Powyższy kod możemy zatem zapisać w ten sposób:

1234567 input{&[type=”text”]{&.error{…}}}

Dzięki takiemu zapisowi po “kompilacji” wygenerujemy odpowiedni kod którego potrzebowaliśmy, ale zapis jest o wiele czytelniejszy dla człowieka. Od razu wiadomo, które elementy znajdują się głębiej w kodzie i które opisujemy dokładniej. Dodatkowo dzięki takiemu zapisowi w bardzo łatwy sposób ostylujemy zwykły elementinputjak i ten z klasą.error.

W związku z symbolem rodzica możemy wykonać też jeszcze jeden ciekawy zabieg. Spróbujmy inaczej zapisać poniższy kod CSS:

1 2 3 4 5 6 7 8 91011 .header-sectiona{font-weight:700;}.content-sectiona{font-weight:300;}a{font-weight:400;}

A teraz to samo zapiszmy w SASSie:

1 2 3 4 5 6 7 8 91011 a{font-weight:400;.header-section&{font-weight:700;}.content-section&{font-weight:300;}}

Jak widzisz symbol rodzica nie zawsze musi znajdować się na pierwszym miejscu. Możesz wykonać jeszcze jedną ciekawą rzecz. Symbol&zawiera element rodzica. Zatem w poniższym przykładzie:

123 .header-section{&{…}}

Symbol&będzie zawierał ciąg znaków.header-section. W związku z tym poniższy kod CSS:

123 .column-left{…}.column-right{…}.column{…}

Możesz zapisać w SASSie w ten sposób:

12345 .column{…&-left{…}&-right{…}}

Dzięki takiemu zapisowi, możemy w bardzo prosty sposób zmienić przedrostekcolumnw całym projekcie. Dzięki użyciu SASS, wykonasz zmianę tylko w jednym miejscu, a on za Ciebie wykona resztę pracy. Prawda, że to całkiem fajne?

Kolejne selektory

Nie zapominajmy także o selektorach. Już wiesz z kursu CSS, że dzięki nim możemy wybrać np. element następujący po paragrafie, lub wszystkie następne elementy. Jak więc to zapisać za pomocą SASS? Jako przykład spróbujmy zapisać taki oto kod CSS:

1234 input[type=”text”]+label,input[type=”password”]+label{font-size:14px;}

W SASSie powyższy kod będzie wyglądał następująco:

12345678 input{&[type=”text”],&[type=”password”]{+label{font-size:14px;}}}

Zapis wydaje się być dłuższy, ale jest też o wiele bardziej czytelny. W dodatku każda nowa zmiana w kodzie będzie czystą przyjemnością i wprowadzisz ją bez większego problemu oraz bez znanego wszystkim “kopiuj - wklej”.

W taki sam sposób ostylujesz pseudoselektory należące do elementu nadrzędnego.

1234567 input{&[type=”text”]{&:focus{// KOD dla input[type=”text”]:focus}}}

Dziedziczenie właściwości

Dziedziczenie odbywa się nie tylko na poziomie elementów. Możesz również dziedziczyć właściwości.

12345 a{font-family:‘Roboto’,sans-serif;font-size:14px;font-weight:700;}

W SASSie możesz zapisać to w poniższy sposób:

1234567 a{font:{family:‘Roboto’,sans-serif;size:14px;weight:700;}}

Zauważ, że jest znacząca różnica w dziedziczeniu właściwości. Nie używa się tutaj operatora elementu nadrzędnego. Zapis ten jest jednak rzadko stosowany. Nie ma bowiem wielu przypadków w których ten zapis byłby możliwy do wykorzystania. Nie daje nam on też zbyt wiele korzyści.

Zadanie 1

Twoim zadaniem jest ostylować inputy, które znajdują się w oknie po prawej stronie. Input typutextpowinien mieć obramowanie koloru zielonego. Input typupasswordpowinien mieć obramowanie koloru niebieskiego. Input z klasą.errorpowinien mieć obramowanie koloru czerwonego.

Dodatkowo każdy z inputów posiada margines znajdujący się pod elementem. Usuńmargin-bottomdla ostatniego elementuinput.

Podsumowanie

W tej lekcji nauczyłeś się czym jest zagnieżdżanie styli, jakie niesie ze sobą korzyści, a także jak ciekawe zastosowanie może mieć symbol elementu nadrzędnego -&. Poznałeś też sposób zapisu innych selektorów dostępnych w CSS, a także ich właściwości.

results matching ""

    No results matching ""