În partea dreaptă a forumurilor există o serie de module. „Module” vizual, „Module” literalmente în cod și „Module” prin faptul că conținutul pe care îl conțin este un grup înrudit, separat / diferit de conținutul din alte module.
Primul la care ne uităm este modulul Categorii. Vanilla Forums le pune literalmente într-un folder numit „module”, ceea ce este frumos. Aceasta, așa cum ați putea ghici, este „categories.php”.
Găsim locul în care este afișat titlul, îi dăm o clasă și începem stilul. Adăugăm doar o mică marjă de jos, după cum este adecvat pentru acest titlu, dar nu fiecare
acolo.
Apoi treceți la coafarea containerului în sine. Modulele tind să aibă un nume de clasă „Box” în cadrul Vanilla Forums. Clasa noastră HTML de modul este „module”. Am putea începe lupta de a găsi fiecare modul în Vanilla și de a adăuga propria noastră clasă. Unele zile mă simt la înălțimea acelei provocări și în unele zile spun doar „Lucrează mai inteligent, nu mai greu”. Astăzi vom lucra mai inteligent. Vom face un selector de substituent în Sass care are stilurile unui modul, dar fără a recrea .moduleclasa noastră existentă .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Selectorii de substituent nu produc deloc niciun CSS de la sine. Dar pot fi @extend-ed. Deci, acum putem face ca toate cutiile în stil Vanilla să aibă stilul nostru de modul.
.Box ( @extend %fake-module; )Aflăm că whiteSmokeeste o culoare minunată.
În marcajul pe care ni-l oferă Vanilla pentru lista categoriilor, ne oferă o clasă „activă”, astfel încât să putem schimba puțin stilul și să evidențiem în ce categorie se află un utilizator (deoarece acest modul este pe o mulțime de pagini, pagini de pornire și pagini de categorii incluse).
Ne întâlnim cu un lucru mic în care utilizarea - variabilei $ nu a funcționat corect, a trebuit să facem - # (variabila $) în schimb. Doar unul dintre acele lucruri despre Sass sau Ruby sau orice altceva.
În jurul orei 10:30, explic teoria modului în care funcționează triunghiurile CSS. Ne gândim să folosim un triunghi în stânga clasei active, pe măsură ce cadrele noastre de sârmă sunt descrise.
Încheiem poziționând numărul de fire la dreapta pentru a oferi utilizatorilor o idee despre cât de mare este categoria.