在 sass mixins 中使用前缀：如何与美元连接以创建变量？

Question

我的 HTML 中有一些 div 有点像这样 :

<div class="items">
  <div class="item1-image-container"></div>
  <div class="item2-image-container"></div>
  <div class="item3-image-container"></div>
  <div class="item4-image-container"></div>
  <div class="item5-image-container"></div>
</div>

他们每个人都有一个 sass 颜色变量，即：

$item1-color;
$item2-color;
$item3-color;
$item4-color;
$item5-color;

因此我想创建一个 mixin，它将颜色添加到每个 div 的背景中。我写了类似的东西，但没有用，我不知道如何解决我的问题，如果我能解决的话...

@mixin background-color-menu-item($prefix: '') {
    .#{$prefix}-picture-container {
        background-color: $#{$prefix}-color;
    }
}

sass 预编译器告诉我 $#{$prefix} 中的第一个美元有问题。

Answer 1

DEMO

所以你可以做你想做的事，但你不会得到你想要的结果。

@mixin background-color-menu-item($prefix: '') {
    .#{$prefix}-picture-container {
        background-color: unquote("$#{$prefix}-color");
    }
}

.stuff {
  @include background-color-menu-item($item5-color);
}

unquote 函数允许您在前面添加 $，但它不会获取变量的值，仅获取变量的名称...

.stuff .yellow-picture-container {
  background-color: $yellow-color;
}

但是如果您的目标只是设置这些值 1 次，您可以使用 map 和迭代来实现您的目标。

$item1-color: blue;
$item2-color: red;
$item3-color: green;
$item4-color: brown;
$item5-color: yellow;

$items: (
  item1: $item1-color,
  item2: $item2-color,
  item3: $item3-color,
  item4: $item4-color,
  item5: $item5-color
);

@each $key, $val in $items {
  .#{$key}-picture-container {
    background-color: #{$val};
  }
};

在 sass mixins 中使用前缀：如何与美元连接以创建变量？

use prefix in sass mixins : how to concatenate with a dollar to create variable?

variables

sass

mixins

dollar-sign