#sass #bootstrap-4
#sass #bootstrap-4
Вопрос:
Я создаю одну HTML-тему, используя BootStrap 4.3.1. Моя цель — переопределить переменную $ primary color в моей теме _user-variables.scss, которая, я думаю, должна изменить все цвета в соответствии с темой _variables.scss в моей теме. Я новичок в BootStrap 4, поэтому, пожалуйста, не могли бы вы быть достаточно любезны, чтобы помочь мне вместо того, чтобы помечать мой вопрос помеченным / дублированным?
Я приведу здесь один пример того, чего я хочу достичь:
Я думаю, что, насколько мне известно, переопределяя только переменную $ primary color в моем _user-variables.scss, следует также изменить цвет всех элементов, которые настроены на прямое использование $ primary color в theme _variables.scss . Это правильно или я делаю здесь что-то не так?
Стиль моей темы.scss:
// Theme variables and mixins
@import "variables";
@import "mixins";
// User Variables
@import "user-variables";
@import "../vendor/bootstrap/scss/functions";
@import "../vendor/bootstrap/scss/variables";
// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";
Я поместил столько кода в свою тему _variables.scss, и это работает нормально:
$primary: #4cbd89;
$link-color: $primary;
$navbar-dark-hover-color: $primary;
$navbar-dark-active-color: $primary;
$navbar-light-hover-color: $primary;
$navbar-light-active-color: $primary;
Я пытаюсь переопределить вышеуказанные пользовательские переменные в _user-variables.scss, как показано ниже:
$primary: #f00f00;
Я предполагаю, что переопределение основного цвета в user-variables.scss должно автоматически изменить значение 5 свойств, находящихся в custom.scss, или мне нужно поместить это в мои user-variables.scss? Я не знаю, каков наилучший способ. Кто-нибудь может мне, пожалуйста, помочь?
Спасибо
Комментарии:
1. Что вы пытаетесь сделать? Изменить все
primaryцвета на#f00f00?2. @Zim Большое вам спасибо за ваш ответ. Я ожидал ответа от вас 🙂 Да, я хочу изменить все цвета на #f00f000 и, чтобы сделать мою тему более удобной для пользователя, я хочу разрешить пользователям изменять цвет только для одной переменной, чтобы он применялся ко всем пяти значениям, которые я перечислил в моей вышеупомянутой теме _variables.scss. Итак, если пользователь просто добавит переменные $ primary: #f00f00 в _user-variables.scss, то все 5 значений в theme _variables.scss будут #f00f00. Извините, если я вношу какую-либо путаницу для вас.
Ответ №1:
В том, как вы определили SCSS, будут только цвета ссылок и ссылки на панель навигации ( $link-color, $navbar-dark-hover-color, $navbar-dark-active-color, $navbar-light-hover-color and $navbar-light-active-color ) #4cbd89 . Все остальные $primary классы будут использовать $primary: #f00f00 , поскольку это последнее переопределяющее определение $primary, которое вы используете перед bootstrap.scss .
Если вы хотите, чтобы пользовательские переменные необязательно (только если указано) переопределяли переменные темы, вам нужно…
Присвоите переменным темы !default флаг..
$primary: #4cbd89 !defau<
$link-color: $primary !defau<
$navbar-dark-hover-color: $primary !defau<
$navbar-dark-active-color: $primary !defau<
$navbar-light-hover-color: $primary !defau<
$navbar-light-active-color: $primary !defau<
Поместите пользовательские переменные перед переменными темы.
// User Variables
@import "user-variables";
// Custom Theme variables and mixins
@import "variables";
@import "mixins";
// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";
Также нет причин @import /scss/bootstrap/functions и /scss/bootstrap/variables перед /scss/bootstrap, поскольку /scss/bootstrap.scss эти файлы уже импортируются.
Демонстрация: https://www.codeply.com/go/8VyTjEPq4j