SASS检查类名

Question

嗨我对SASS还是很新的，没有编程专家。

我有10个旁白元素，根据他们的类名称都需要不同的背景颜色。

我已经浏览了SASS文档，我找不到它。

我想说，如果抛开有X创建背景色X的类名，如果预留有y的类名使背景Y色等

是否有这样做的一个很好的有效的方法？

谢谢你们，如果是一个简单的问题，非常抱歉。

Answer 1

如果您使用的颜色没有“标准”名称（或者类的名称根本不会是一种颜色，例如products = blue，addresses = red），列出的清单是你想要什么：

$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代码编译为CSS而不能在之后更改，那么SASS不可能）。

为了让你不得不使用JS（jQuery的）的工作：

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

编辑：您可以使用循环SASS中产生了大量的类和相应的背景颜色，但。