0

Думаю как сделать темы для сайта на Yii2. Создается на основе шаблона advanced.

Сейчас в каталоге web, куда направлен сервер лежит такая структура:

_dev/
    sass/
        _global.scss
        _vars.scss
        site.scss
css/
    site.css

Из _dev/sass/* все просто компилится в css/*.

Как бы я сделал без sass Положил бы рядом с web, или прямо в web каталог themes с примерно такой структурой:

themes/
    classic/
        css/
            mod1/
                mod.css
            mod2/
                mod.css
            theme.css

Таким образом файлами theme.css и mod.css переопределял бы существующие стили, или добавлял бы новые. И в итоге на странице бы подключались 3 css файлика:

main.css - основные стили
theme.css - изменения для темы
mod.css - изменения для модификации темы

Но с sass хотелось бы использовать фишку с переменными. К примеру, в mod.scss я бы хранил только переопределенные переменные с цветами и картинками.

Первый вариант: я делаю структуру как описал для css, и пытался бы описать sass так, чтобы чтобы в итоге получился css файлик с переопределенными стилями.

Второй вариант: я делаю описанную выше структуру для css, делаю файлики mod.sass с переопределенными переменными, делаю файлик combine.sass, где описываю нужные инклуды и в итоге на сайт подключается только один mod.css, куда будет скомпилено все, что подключено в mod.scss. Подход не нравится, т.к. в каждой теме будет куча дублированного css (хотя я с ним не буду работать, ведь я правлю только sass файлы...)

Третий вариант: В Yii2 есть встроенные препроцессоры для sass, less и тд. и возможность у AssetBundle указывать sourcePath, чтобы фреймворк сам скопировал файлики в доступное из веба место. И используя это попытаться описать логику тем в AssetBundle (а не через конфиг themes) так, чтобы нужные файлы компилились только для активной темы. (Но я пока не знаю как это сделать)

Подскажите, пожалуйста, как, на ваш взгляд оптимальнее было бы сделать задуманное? Или может быть кто-то уже реализовывал подобное? Спасибо за любую идею.

1 ответ 1

0

Вобщем сделал следующим образом. Тему поделил на такие части:

  1. Маска. Переопределяет сетку сайта. Может быть полностью новый дизайн.

  2. Модификации. Переопределяет отдельные части сайта. Виджеты, компоненты, списки или что-то еще.

  3. Стили. Содержит только переменные с цветами, шрифтами, картинками и тд.

  4. Темы. Содержит sass файл, содержит только инклуды вышеперечисленных файлов. Компилится в соответствующее место в папке web

    themes v1 mask sass views mods footer.v2 leftsidebar styles default darkblue themes default sass darkblue sass v2 mask mods styles themes

1
  • Почему-то не работает форматирование кода... Помогите, пожалуйста
    – Skywave
    10 ноя 2017 в 12:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.