Foorumite paremal küljel on rida mooduleid. „Moodulid” visuaalselt, „Moodulid” sõna otseses mõttes koodis ja „Moodulid” selle poolest, et neis sisalduv sisu on seotud rühm, mis on eraldi / erinev teiste moodulite sisust.
Esimene, mida me vaatame, on moodul Kategooriad. Vanilla Foorumid paneb need sõna otseses mõttes kausta nimega "moodulid", mis on tore. Nagu võite arvata, on see konkreetne kategooria.php.
Leiame koha, kus pealkiri väljastatakse, anname sellele klassi ja alustame stiili kujundamist. Lisame lihtsalt väikese alamvaru, nagu see pealkiri sobib, kuid mitte iga üksik
seal väljas.
Seejärel liikuge konteineri enda kujundamisse. Moodulitel on Vanilla Foorumites tavaliselt klassi nimi „Box”. Meie mooduli HTML-klass on “moodul”. Võiksime alustada võitlust, et leida Vanillast iga moodul ja lisada oma klass. Mõnel päeval tunnen seda väljakutset ja mõni päev ütlen lihtsalt: "Tee tööd targemini, mitte raskemini." Täna töötame targemini. Teeme Sassis kohahoidjavalija, millel on mooduli stiilid, kuid olemasolevat .moduleklassi uuesti loomata .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Kohahoidjate valijad ei väljasta ühtegi CSS-i ise. Kuid neid saab @extendravida. Nüüd saame lihtsalt panna kõik Vanilla-stiilis kastid oma mooduli kujundusega.
.Box ( @extend %fake-module; )Saame teada, et whiteSmokesee on vinge värv.
Märgistuses, mille Vanilla meile kategooriate loendi jaoks annab, annab see meile "aktiivse" klassi, et saaksime veidi stiili muuta ja teha selgeks, millisesse kategooriasse kasutaja kuulub (kuna see moodul on paljudel lehtedel, kodulehtedel ja kategoorialehed).
Me sattusime pisiasja juurde, kus muutuja $ muutmine ei töötanud õigesti, vaid pidime tegema - # ($ muutuja). Lihtsalt üks neist asjadest, mis puudutavad Sassi või Rubyt või mida iganes.
Umbes kell 10.30 selgitan CSS kolmnurkade toimimise teooriat. Kaalume aktiivse klassi vasakul pool asuva kolmnurga kasutamist, kuna meie traadiraamid lähevad kokku.
Lõpuks paigutame niitide arvu paremale, et anda kasutajatele aimu kategooria suurusest.