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中使用前缀：如何用美元连接来创建变量？

1 个答案: