Dešinėje forumų pusėje yra keletas modulių. „Moduliai“ vizualiai, „Moduliai“ pažodžiui kodais ir „Moduliai“, nes juose esantis turinys yra susijusi grupė, atskirta / skiriasi nuo kitų modulių turinio.
Pirmasis, į kurį žiūrime, yra „Kategorijų“ modulis. Vanilės forumai tiesiogine to žodžio prasme įdeda į aplanką, vadinamą „moduliai“, o tai yra puiku. Šis konkretus, kaip jūs galite atspėti, yra „categories.php“.
Mes randame vietą, kur išleidžiamas pavadinimas, suteikiame klasę ir pradedame stilių. Tiesiog pridedame šiek tiek apatinės paraštės, kaip tinka šiam pavadinimui, bet ne kiekvienam
ten.
Tada pereikite prie paties konteinerio stiliaus. Vanilės forumuose moduliai paprastai vadinasi „Box“. Mūsų modulio HTML klasė yra „modulis“. Galėtume pradėti kovą ieškodami kiekvieno vanilės modulio ir įtraukdami savo klasę. Kai kuriomis dienomis jaučiuosi tam iššūkiui, o kai kada tiesiog sakau „Dirbk protingiau, o ne sunkiau“. Šiandien dirbsime protingiau. „Sass“ atliksime vietos rezervavimo priemonės parinkiklį, kuris turi modulio stilių, tačiau iš naujo nesukuriant esamos .moduleklasės.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Vietos parinkėjai apskritai patys neišleidžia CSS. Bet jie gali būti @extend-ed. Taigi dabar galime tiesiog padaryti, kad visos „Vanilla“ stiliaus dėžutės turėtų savo modulio stilių.
.Box ( @extend %fake-module; )Sužinome, kad whiteSmoketai nuostabi spalva.
Pažymėjime, kurį Vanilla mums pateikia kategorijų sąrašui, tai suteikia mums „aktyvią“ klasę, kad galėtume šiek tiek pakeisti stilių ir aiškiai parodyti, kurioje kategorijoje yra vartotojas (kadangi šis modulis yra daugelyje puslapių, pagrindiniuose puslapiuose ir kategorijų puslapiai).
Mes susidūrėme su mažu dalyku, kai naudojant - $ kintamasis neveikė teisingai, mes turėjome tai padaryti - # ($ kintamasis). Tik vienas iš tų dalykų apie Sassą, Ruby'ą ar dar ką nors.
Apie 10:30 paaiškinu CSS trikampių veikimo teoriją. Svarstome galimybę naudoti trikampį kairėje aktyviosios klasės pusėje, nes mūsų vieliniai rėmai diktuoja.
Pabaigoje išdėstome gijų skaičių dešinėje, kad vartotojai suprastų, kokia yra kategorija.