@para_noir_in_my_box

Как организовать темы с использованием sass в Yii2?

Думаю как сделать темы для сайта на 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. Пока что склоняюсь к этому подходу.

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

Подскажите, пожалуйста, как, на ваш взгляд оптимальнее было бы сделать задуманное? Или может быть кто-то уже реализовывал подобное? Спасибо за любую идею.
  • Вопрос задан
  • 495 просмотров
Решения вопроса 1
@para_noir_in_my_box Автор вопроса
Вобщем сделал следующим образом.
Тему поделил на такие части:
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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы