css - SASS 检查类名

Question

嗨，我对 SASS 还是很陌生，也没有编程大师。

我有十个辅助元素，它们都需要根据它们的类名使用不同的背景颜色。

我查看了 SASS 文档，但无法弄清楚。

我想说如果旁边有一个类名 x 制作背景颜色 x 如果旁边有一个类名 y 制作背景颜色 y 等

有没有一种很好的有效方法？

谢谢大家，对不起，如果它是一个简单的问题。

Answer 1

如果您使用的颜色没有“标准”名称（或者类的名称根本不是颜色名称，例如产品 = 蓝色，地址 = 红色），则列表列表是你想要的：

$colors:
    ( black #000
    , white #FFF
    , red #F00
    , green #0F0
    , blue #00F
    );

@each $i in $colors {
    aside.#{nth($i, 1)} {
        background: nth($i, 2);
    }
}

输出：

aside.black {
  background: black; }

aside.white {
  background: white; }

aside.red {
  background: red; }

aside.green {
  background: lime; }

aside.blue {
  background: blue; }

如果您使用标准关键字的颜色，这可能会起作用：

$colors2: black, white, red, green, blue;

@each $i in $colors2 {
    aside.#{$i} { background: $i; }
}

输出（虽然这似乎只适用于--style debug，使用--style compress产生错误..奇怪）：

aside.black {
  background: black; }

aside.white {
  background: white; }

aside.red {
  background: red; }

aside.green {
  background: green; }

aside.blue {
  background: blue; }

Answer 2

这只是取决于您想要输入多少打字。您可以制作一个背景混合并将其包含在备用 CSS 规则中，但这真的有必要吗？

如果是的话....

@mixin bg($color) {
    background: $color;
}

aside#foo {
    @include bg(#fff);
}

Answer 3

“如果一边有一个类名 x 使背景颜色 x 如果一边有一个类名 y 使背景颜色 y”转换为以下 CSS：

aside.x {background-color: x}
aside.y {background-color: y}

你有理由要使用 SASS 吗？是否让它动态化，以便您将来可以添加任何您想要的类而不更新 CSS？（如果是这样，SASS 就不可能，因为 SASS 代码编译为 CSS 并且之后不会更改）。

要完成这项工作，您必须使用 JS (jQuery)：

$('aside').each(function () {
    $(this).css('background-color', $(this).attr('class'));
});

编辑：您可以在 SASS 中使用循环来生成大量类和相应的背景颜色。