Forumların sağ tarafında bir dizi modül var. Görsel olarak "Modüller", kod olarak "Modüller" ve içerdikleri içerikler, diğer modüllerdeki içerikten ayrı / farklı, ilgili bir gruptur.
İlk baktığımız şey Kategoriler modülü. Vanilla Forumları, bunları kelimenin tam anlamıyla "modüller" adlı bir klasöre koyar ki bu güzeldir. Bu belirli, tahmin edebileceğiniz gibi, "kategoriler.php" dir.
Başlığın çıktısının olduğu yeri buluyoruz, ona bir sınıf veriyor ve şekillendirmeye başlıyoruz. Bu başlık için uygun olan küçük bir alt kenar boşluğu ekliyoruz, ancak her biri
dışarıda.
Ardından kabın kendisini şekillendirmeye başlayın. Modüller, Vanilya Forumları içinde "Kutu" sınıf adına sahip olma eğilimindedir. Modül HTML sınıfımız “modül” dür. Vanilla'daki her bir modülü bulma ve kendi sınıfımızı ekleme savaşına başlayabiliriz. Bazı günler bu zorluğun üstesinden geliyorum ve bazı günler sadece "Daha çok değil, daha akıllı çalış" diyorum. Bugün daha akıllı çalışacağız. Sass'ta bir modülün stillerine sahip, ancak mevcut .modulesınıfımızı yeniden oluşturmadan bir yer tutucu seçici yapacağız .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Yer tutucu seçiciler kendi başlarına herhangi bir CSS çıktısı almazlar. Ama @extend-edilebilirler. Artık tüm Vanilya tarzı kutularda modül stilimiz olmasını sağlayabiliriz.
.Box ( @extend %fake-module; )Bunun whiteSmokeharika bir renk olduğunu öğreniyoruz .
Vanilla'nın kategori listesi için bize verdiği işaretlemede, bize "aktif" bir sınıf verir, böylece stili biraz değiştirebilir ve bir kullanıcının hangi kategoride olduğunu açıkça görebiliriz (çünkü bu modül birçok sayfada, ana sayfada yer almaktadır. ve kategori sayfaları dahil).
- $ değişkeninin doğru çalışmadığı küçük bir şeyle karşılaştık, bunun yerine - # ($ değişken) yapmalıydık. Sass veya Ruby ya da her neyse o şeylerden sadece biri.
Yaklaşık 10: 30'da CSS üçgenlerinin nasıl çalıştığının teorisini açıklayacağım. Tel çerçevelerimizin belirttiği gibi, aktif sınıfın solunda bir üçgen kullanmayı düşünüyoruz.
Kullanıcılara kategorinin ne kadar büyük olduğu konusunda bir fikir vermek için iş parçacığı sayısını sağa yerleştirerek bitiriyoruz.