通过 SASS 循环和赋值答案

【问题标题】：Looping and assigning values through SASS通过 SASS 循环和赋值
【发布时间】：2019-07-18 22:46:16
【问题描述】：

在判断我的情况之前，我没有使用典型的 Bootstrap 方法来为变量分配自定义颜色。我处于依赖 Bootstrap CDN 的独特情况，并重新创建 看起来像 BS4 变量的自定义 SASS 变量。继续阅读！

我觉得我对以下过程非常接近。我要做的就是将我的数组值分配给这样的类属性名称，（即背景颜色：$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，现在添加了变量
你在使用一些框架/主题吗？

标签： sass bootstrap-4

【解决方案1】：

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

您还可以将 bootstrap sass 直接输入到您的构建管道中，以使用它们的所有 var、mixin 和函数； 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 循环中提醒我真正的键值对来帮助我解决问题。
别担心，我们都去过那里。

【解决方案2】：

如果您没有从 _base / 其他目录导入 $theme 变量，那么您如何期望脚本知道用什么来填充它？
你的语法错误，你需要用#{}包裹$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;
}

【讨论】：

【解决方案3】：

如果你使用的是Bootstrap4，可以直接给$theme-colors添加新的颜色，添加新的key和value

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

【讨论】：