Di sebelah kanan forum terdapat sebilangan modul. "Modul" secara visual, "Modul" secara harfiah dalam kod, dan "Modul" di mana kandungan yang mereka isi adalah kumpulan yang terkait, terpisah / berbeza dari isi dalam modul lain.
Yang pertama kita perhatikan adalah modul Kategori. Forum Vanilla secara harfiah meletakkannya dalam folder yang disebut "modul", yang bagus. Yang khusus ini, seperti yang anda duga, adalah "profiles.php".
Kami mendapat tempat di mana judulnya dikeluarkan, memberikan kelas, dan mula menggayakan. Kami hanya menambah sedikit margin bawah yang sesuai untuk tajuk ini, tetapi tidak setiap satu
di luar sana.
Kemudian beralih ke menggayakan bekas itu sendiri. Modul cenderung mempunyai nama kelas "Kotak" di dalam Forum Vanila. Kelas HTML modul kami adalah "modul". Kita boleh memulakan perjuangan mencari setiap modul di Vanilla dan menambah kelas kita sendiri. Beberapa hari saya merasakan cabaran itu dan beberapa hari saya hanya mengatakan "Bekerja lebih pintar, tidak lebih sukar." Hari ini kita akan bekerja dengan lebih bijak. Kami akan membuat pemilih placeholder di Sass yang mempunyai gaya modul, tetapi tanpa membuat semula .modulekelas yang ada .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Pemilih placeholder sama sekali tidak mengeluarkan CSS. Tetapi mereka boleh diberi @extendmakan. Jadi sekarang kita hanya boleh membuat semua kotak gaya Vanilla mempunyai gaya modul kita.
.Box ( @extend %fake-module; )Kami belajar bahawa itu whiteSmokeadalah warna yang mengagumkan.
Dalam markup yang diberikan Vanilla kepada kami untuk senarai kategori, ia memberi kami kelas "aktif" sehingga kami dapat sedikit mengubah gaya dan membuatnya jelas pada kategori mana pengguna berada (kerana modul ini terdapat di banyak halaman, halaman utama dan halaman kategori disertakan).
Kita menghadapi sedikit perkara di mana menggunakan - $ variabel tidak berfungsi dengan betul, kita harus lakukan - # ($ variabel) sebagai gantinya. Hanya satu perkara mengenai Sass atau Ruby atau apa sahaja.
Kira-kira jam 10:30, saya menerangkan teori bagaimana segitiga CSS berfungsi. Kami sedang mempertimbangkan untuk menggunakan segitiga di sebelah kiri kelas aktif, sebagai bingkai dawai kami.
Kami menyelesaikan dengan meletakkan bilangan utas di sebelah kanan untuk memberi gambaran kepada pengguna tentang seberapa besar kategori ini.