Зацикливание и присвоение значений через SASS
Прежде чем судить о моей ситуации, я не использую типичный подход Bootstrap для назначения пользовательских цветов переменным. Я нахожусь в уникальной ситуации, связанной с зависимостью от Bootstrap CDN и воссозданием пользовательских переменных SASS, которые являются переменными выглядит как BS4. Читать дальше!
Я чувствую, что я так близок к следующему процессу. Все, что я хочу сделать, это присвоить значения моего массива имени свойства класса, например, (т.е. background-color: $theme-primary!important;)
//ORIGINAL THEME VARIABLES
$theme-colors: (primary:$m-color-blue, secondary: $m-color-off-white, success: $m-color-grey, info: $m-color-grey-light, warning: $m-color-gold, light: $m-color-white, dark: $m-color-grey-dark);
$theme-primary: map-get($theme-colors, "primary");
$theme-secondary: map-get($theme-colors, "secondary");
$theme-success: map-get($theme-colors, "success");
$theme-info: map-get($theme-colors, "info");
$theme-warning: map-get($theme-colors, "warning");
$theme-light: map-get($theme-colors, "light");
$theme-dark: map-get($theme-colors, "dark");
//MY LOOP TO ASSIGN BS4 BG COLORS TO MY CUSTOM COLORS.
$classes: primary secondary success warning danger light;
@each $class in $classes {
html body .bg-#{$class} {
//MY ISSUE IS HERE...IT DOES NOT LIKE HOW I AM FORMING THIS PROPERTY. SYNTAX ISSUE???
background-color: $theme-#{class} !important;
}
}
Но когда я пытаюсь скомпилировать его, я получаю следующую ошибку:
messageOriginal: Undefined variable: "$theme-".
Я думаю, что получаю ошибку, но как мне решить?
У меня такое ощущение, что это проблема синтаксической ошибки... по какой-то причине это может быть незаконно $theme-#{class} - я думаю, что мой формат неверен... Я пытаюсь добавить свою переменную #{class} в $theme -, которое является частичным именем другой переменной.
@Sonia, переменные теперь добавлены
Вы используете какой-то фреймворк/тему?
Ответы 3
Если вы не импортируете переменную
$themeиз вашего_base/другого каталога, то как вы ожидаете, что скрипт узнает, чем ее заполнить?Ваш синтаксис неверен, вам нужно также обернуть
$themeс#{}, чтобы это было#{$theme}-#{class}
рабочий пример:
$classes: primary secondary success warning danger light;
$theme: 'blue'; // switch this with import theme.
@each $class in $classes {
html body .bg-#{$class} {
background-color: #{$theme}-#{$class} !important;
}
}
сгенерированный css:
html body .bg-primary {
background-color: blue-primary !important;
}
html body .bg-secondary {
background-color: blue-secondary !important;
}
html body .bg-success {
background-color: blue-success !important;
}
html body .bg-warning {
background-color: blue-warning !important;
}
html body .bg-danger {
background-color: blue-danger !important;
}
html body .bg-light {
background-color: blue-light !important;
}
Я не уверен, зачем это нужно, поскольку для этого уже доступны служебные классы; https://getbootstrap.com/docs/4.0/utilities/colors/#фоновый цвет
Вы также можете загрузить bootstrap sass прямо в конвейер сборки, чтобы уже использовать все их переменные, миксины и функции; https://getbootstrap.com/docs/4.0/getting-started/theming/
Тем не менее, я думаю, вы ищете что-то более похожее на этого амиго; Ваше здоровье
$classes: (
primary: "#f00",
secondary: "#ddd",
success: "#00f",
warning: "#0f0",
danger: "#f00",
light: "#eee"
);
@each $key, $val in $classes {
.bg-#{$key} {
background-color: #{$val} !important;
}
}
Я усложняла жизнь своей ситуацией. Большое спасибо за то, что помогли мне решить мою проблему, напомнив мне о истинных парах ключ-значение в цикле sass и просто продолжая это.
Не беспокойтесь, мы все были там.
Если вы используете Bootstrap4, вы можете напрямую добавить новый цвет в $theme-colors, добавить новый ключ и значение
$theme-colors: (
"custom-color": #900
);
импортировать файл переменных темы в этот текущий файл