В правой части форумов есть несколько модулей. «Модули» визуально, «Модули» буквально в коде и «Модули» в том смысле, что содержимое, которое они содержат, является связанной группой, отдельной / отличной от содержимого в других модулях.
Сначала мы рассмотрим модуль «Категории». Vanilla Forums буквально помещает их в папку под названием «modules», что приятно. В частности, как вы могли догадаться, это «category.php».
Мы находим место вывода заголовка, присваиваем ему класс и начинаем стилизовать. Мы просто добавляем небольшое нижнее поле, подходящее для этого заголовка, но не все
там.
Затем перейдите к стилизации самого контейнера. Модули обычно имеют имя класса «Коробка» внутри ванильных форумов. Наш модульный HTML-класс - это «модуль». Мы могли бы начать борьбу за поиск каждого модуля в Vanilla и добавление нашего собственного класса. Иногда я чувствую себя готовым к этой задаче, а иногда просто говорю: «Работайте умнее, а не усерднее». Сегодня мы будем работать умнее. Мы создадим в 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угостить. Итак, теперь мы можем просто сделать все коробки в стиле Vanilla с нашим модульным стилем.
.Box ( @extend %fake-module; )Мы узнаем, что whiteSmokeэто потрясающий цвет.
В разметке, которую Vanilla дает нам для списка категорий, она дает нам «активный» класс, поэтому мы можем немного изменить стиль и сделать очевидным, в какой категории находится пользователь (поскольку этот модуль находится на многих страницах, домашние страницы и страницы категорий включены).
Мы столкнулись с небольшой проблемой, когда использование - $ variable не работало правильно, вместо этого нам пришлось использовать - # ($ variable). Просто одна из тех вещей, которые касаются Sass, Ruby или чего-то еще.
Примерно в 10:30 я объясняю теорию того, как работают треугольники CSS. Мы рассматриваем возможность использования треугольника слева от активного класса, как говорят наши каркасы.
В заключение мы разместили количество потоков справа, чтобы дать пользователям представление о том, насколько велика категория.