Gar forumu labo pusi atrodas virkne moduļu. “Moduļi” vizuāli, “Moduļi” burtiski kodā un “Moduļi”, jo tajos esošais saturs ir saistīta grupa, atdalīta / atšķirīga no citu moduļu satura.
Pirmais, ko aplūkojam, ir Kategoriju modulis. Vanilla Forums burtiski ievieto tos mapē ar nosaukumu “moduļi”, kas ir jauki. Šis konkrētais, kā jūs varētu uzminēt, ir “categories.php”.
Mēs atrodam vietu, kur nosaukums tiek izvadīts, piešķiram tai klasi un sākam veidot. Mēs vienkārši pievienojam nelielu apakšējo rezervi, kā tas ir piemērots šim nosaukumam, bet ne katram atsevišķam
tur ārā.
Pēc tam pārejiet pie paša konteinera veidošanas. Moduļiem Vanilla forumos parasti ir klases nosaukums “Box”. Mūsu moduļa HTML klase ir “modulis”. Mēs varētu sākt cīņu par katra vaniļas moduļa atrašanu un savas klases pievienošanu. Dažas dienas es izjūtu šo izaicinājumu, un dažas dienas es vienkārši saku: "Strādājiet gudrāk, nevis grūtāk." Šodien mēs strādāsim gudrāk. Sass izveidosim viettura atlasītāju, kuram ir moduļa stili, taču neveidojot atkārtoti esošo .moduleklasi.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Vietnieku atlasītāji paši neizdod nevienu CSS. Bet viņi var būt @extend-ed. Tāpēc tagad mēs varam vienkārši padarīt visas vaniļas stila kastes ar mūsu moduļa stilu.
.Box ( @extend %fake-module; )Mēs uzzinām, ka whiteSmoketā ir lieliska krāsa.
Marķējumā, ko Vanilla mums piešķir kategoriju sarakstam, tā dod mums “aktīvo” klasi, lai mēs varētu mazliet mainīt stilu un padarīt acīmredzamu, kurā kategorijā lietotājs atrodas (jo šis modulis ir daudzās lapās, mājas lapās un kategoriju lapas).
Mēs saskaramies ar mazu lietu, kur izmantot - $ mainīgais nedarbojās pareizi, mums tas bija jādara - # ($ mainīgais). Tikai viena no šīm lietām par Sassu vai Rubīnu vai ko citu.
Apmēram pulksten 10:30 es paskaidroju CSS trijstūru darbības teoriju. Mēs apsveram iespēju izmantot trijstūri aktīvās klases kreisajā pusē, jo mūsu stiepļu rāmji dalās.
Mēs beidzam, pozicionējot pavedienu skaitu pa labi, lai lietotāji varētu saprast, cik liela ir kategorija.