在sass mixins中使用前缀：如何用美元连接来创建变量？-Java 学习之路

我的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} 中的第一个美元是个问题 .

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

回复于 2024-05-07T01:01:34+08:00

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

1 回答

相关问题