Уздовж правої сторони форумів є ряд модулів. „Модулі” візуально, „Модулі” буквально в коді та „Модулі”, оскільки вміст, який вони містять, є пов’язаною групою, окремо / відрізняється від вмісту інших модулів.
Перший, який ми розглядаємо, - це модуль Categories. Vanilla Forums буквально поміщає їх у папку під назвою “модулі”, що приємно. Цей конкретний, як ви можете здогадатися, - "categories.php".
Ми знаходимо місце, де виводиться заголовок, даємо йому клас і починаємо стиль. Ми просто додаємо трохи нижнього поля, як підходить для цього заголовка, але не кожного
там.
Потім перейдіть до стилізації самого контейнера. Модулі, як правило, мають назву класу “Box” на форумах Vanilla. Наш модуль HTML-класу - “модуль”. Ми могли б розпочати боротьбу з пошуку кожного модуля у ванілі та додавання нашого власного класу. Деякі дні я відчуваю себе готовим до цього виклику, а інколи просто кажу: „Працюй розумніше, а не важче”. Сьогодні ми працюватимемо розумніше. Ми зробимо селектор заповнювача в Sass, який має стилі модуля, але без повторного створення нашого існуючого .moduleкласу.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Селектори заповнювачів взагалі не виводять жодного CSS. Але вони можуть бути @extend-ed. Тому тепер ми можемо просто зробити так, щоб усі коробки у стилі ванілі мали наш модульний стиль.
.Box ( @extend %fake-module; )Ми дізнаємось, що whiteSmokeце неймовірний колір.
У розмітці, яку Vanilla надає нам для списку категорій, вона дає нам «активний» клас, щоб ми могли трохи змінити стиль і зробити зрозумілим, в якій категорії знаходиться користувач (оскільки цей модуль знаходиться на багатьох сторінках, домашніх сторінках та сторінки з категоріями).
Ми стикаємось із дрібницею, коли використання - змінної $ не працювало належним чином, натомість нам потрібно було зробити - # (змінну $). Лише одна з тих речей про Сасс чи Рубі, або що завгодно.
Приблизно о 10:30 я пояснюю теорію того, як працюють трикутники CSS. Ми розглядаємо можливість використання трикутника ліворуч від активного класу, як це означають наші каркаси.
Ми закінчуємо, розміщуючи кількість ниток праворуч, щоб дати користувачам уявлення про те, наскільки велика категорія.