Question

在判断我的情况之前，我没有使用典型的Bootstrap方法将自定义颜色分配给变量。我处于一种特殊的情况下，取决于Bootstrap CDN，并重新创建 BS4变量的自定义SASS变量。继续阅读！

我觉得在接下来的过程中我是如此接近。我要做的就是将我的数组值分配给一个类属性名称，例如，（即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-".

我认为我得到了错误，但是我该如何解决？

Answer 1

我不确定为什么这是必要的，因为已经有实用程序类可供使用； https://getbootstrap.com/docs/4.0/utilities/colors/#background-color

您还可以将bootstrap sass直接输入到构建管道中，以使用它们的所有var，mixins和函数； https://getbootstrap.com/docs/4.0/getting-started/theming/

但是，我认为您正在寻找的东西更像是这种朋友。干杯

['a', 'b'].forEach((item, index) => console.log(index, item));

Answer 2

如果您不从$theme /其他目录导入_base变量，那么您如何期望脚本知道用什么填充？
< / li>
您的语法是错误的，您还需要用$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;
}

Answer 3

如果您使用的是Bootstrap4，则可以直接向$ theme-colors添加新颜色，并添加新键和值

$theme-colors: (
  "custom-color": #900
);

通过SASS循环和分配值

3 个答案: