@acaxapo

Как менять $primary в 4-ом бутстрапе в зависимости от id страницы?

Приблизительная структура проекта, построенного на gulp, sass и bootstrap-4, следующая:
site
     libs
          bootstrap
               ...
               _variables.scss
     sass
          _libs.sass (здесь подключен бутстрап-4)
          _vars.sass (здесь переопределяются стили бутстрапа)
          main.sass (сюда подключены _libs.sass и _vars.sass и добавлены свои стили)
     green.html
     index.html
     red.html
     ....html
gulpfile.js
package.json


Изменить фирменный цвет элементов всего сайта, например, на красный - проще простого: в файле _vars.sass написать "$primary: red".

Но как изменить $primary в зависимости от id страницы, добавленного к body?
Например, если в файле red.html пишем<body id="red-page"></body>, то в файле _vars.sass пишем $primary: red, а если в файле green.html пишем <body id="green-page"></body>, то в файле _vars.sass пишем $primary: green.
Как в файле _vars.sass прописать такие условия?
Даже больше: как для разных id задать несколько индивидуальных стилей (например, для красной - красные элементы и кнопки с закруглениями в 1rem, а для зеленой - зеленые элементы, кнопки без закруглений, другие отступы и т.д.)?

При написании:
#red-page
     $primary: red

gulp выдает ошибку

Заранее благодарю.
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Делаете несколько файлов: main-default.scss, main-red.scss и т.п.

В каждом пишете примерно следующее

$primary: red;
@import 'vars.scss';
…


Дальше дело техники — на каждой странице подключаете свой файл.

Очевидный недостаток — слишком много дублирующихся стилей на выходе. Но с другой стороны подключается только один из main файлов, и это самое простое решение, не требующее вмешательства в исходники бутстрапа.

Другой вариант — выдрать все стили, влияющие на цветовую схему и подключать main.css + цветовую схему. Тут возможны под-варианты — отдельные файлы для тем, один файл через корневой селектор. В любом случае тут уже придется вмешиваться в исходники или дублировать часть исходников в своих темах.

Если у вас будет не очень много тем, лучше пойти по первому пути. Если количество цветовых решений не ограничено, то вытащить часть стилей и инлайнить их прямо в страницу (готовым css).
Ответ написан
Ваш ответ на вопрос

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

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