在sass混合中使用前缀:如何与美元连接以创建变量?

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;
}

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};
  }
};