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

Question

acaxapo @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 выдает ошибку

Заранее благодарю.

Вопрос задан более трёх лет назад
117 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

3 комментария

acaxapo @acaxapo Автор вопроса
Спасибо.

Т.е. применить один из методов sass не получится, чтобы все это автоматизировать?
Например, c помощью ассоциативных массивов, функций, директив...
К примеру:
@each $idpage in red, green, yellow .#idpage-page $primary: #{$idpage}

Но это - переделка из примера на сайте sass, а там примеры в другом синтаксисе (scss), поэтому выдает ошибку. Ну и в этом примере все-таки можно поменять только одно значение (цвет, например). А нужно менять несколько значений.

Конечно, как вариант, можно и так, как предложил Сергей delphinpro. Но очевидный недостаток (для каждой страницы своя таблица стилей, а это целая библиотека бутстрап) - очень большой недостаток в разрезе требований к скорости загрузки сайтов.

Чувствую, должно быть простое для разработки и "легкое" для сайта решение, типа
#red-page $primary: red $btn-border-radius: none #green-page $primary: green $btn-border-radius: .1rem
Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега Sass
acaxapo, мне кажется вы не полностью понимаете принципы работы препроцессоров. То что вы описали и как описали в принципе невозможно.

Наиболее "легкое" для браузера решение — это использование css-переменных. Как раз то, что вы описали.

Но опять же — вам придется залезть в исходники бутстрапа. Потому что сам бутстрап не поддерживает "мультибрендовость". В нем все сделано для того, чтобы вы могли легко создать свою тему для сайта. Но тему единственную. Несколько тем — только через дублирование всего файла стилей. Да и не просто это.

Возвращаюсь к идее в css-переменными. Собираем все цвета и создаем для них кастомные свойства на руте

:root { --primary: #{$primary}; ... }

Потом описываем эти же цвета для других тем

.theme-blue { --primary: blue; } .theme-green { --primary: green; }

Потом лезем в исходники, в везде где встречается цвет дописываем:

.selector { background-color: $primary; // существующая строка background-color: var(--primary); }

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

Браузеры, не понимающие css-переменные, покажут сайт в дефолтном цвете.

Небольшая демка для полного понимания принципа темизации:
snippet
Написано более трёх лет назад
acaxapo @acaxapo Автор вопроса

Сергей delphinpro, спасибо.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

Gulp.js

Простой
Gulp livereload не перезагружает браузер, как исправить?
- 1 подписчик
- 6 часов назад
- 14 просмотров
0

ответов
Gulp.js

Простой
Gulp сборка, изображения при автоматическом переносе в dist не читабельные, как исправить?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 89 просмотров
2

ответа
PHP

+2 ещё

Простой
Как можно отредактировать микроразметку сайта написанного на Bootstrap?
- 1 подписчик
- 17 нояб.
- 234 просмотра
3

ответа
Gulp.js

Средний
Как сделать чтобы gulp не ломал картинки любого формата при сжатии?
- 1 подписчик
- 06 нояб.
- 73 просмотра
0

ответов
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- 04 нояб.
- 192 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как в js, scss, html реализовать tooltip который показывается если навести на объект ниже?
- 2 подписчика
- 31 окт.
- 114 просмотров
1

ответ
CSS

+2 ещё

Простой
Как исправить не корректное изменение свойства display css?
- 1 подписчик
- 25 окт.
- 88 просмотров
1

ответ
Sass

+2 ещё

Простой
VS Code в SASS-файлах не работает Emmet?
- 1 подписчик
- 25 окт.
- 60 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как мне написать скрипт для вывода изображения bootstrap 5 и js?
- 1 подписчик
- 06 окт.
- 89 просмотров
2

ответа
Показать ещё Загружается…

Middle Java Developer

Dijkstra Markets

от 140 000 до 300 000 ₽

Site Reliability Engineer (SRE)

Americor • Москва

от 4 000 $

С/С++ Linux разработчик

Tempesta Technologies

До 8 000 $

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

200000 руб./за проект

Answer 1 · 2019-01-07 20:46:40

Делаете несколько файлов: main-default.scss, main-red.scss и т.п.

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

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

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

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

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

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

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

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

Минуточку внимания

Войдите на сайт