Question

我正在尝试制作一个mixin，让我根据你所使用的变量名称创建适应的代码块。

$foo: #00A9EC;
@mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color($foo);

输出：

.color-foo a.level2,
.color-foo a.level2:visited {
    color: #00A9EC; }

.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
        color: #20C0FF; }

.color-foo a.level2:active,
.color-foo a.level2:visited:active {
        color: #0084B9; }

Answer 1

您不应该在特定颜色后命名CSS类。你会后悔的。试想一下，如果你想稍后将颜色变成红色，你需要回顾所有的html并更改类。

我们拥有CSS的原因是您不必在标记中嵌入样式信息。

使用描述数据的语义类，而不是它的显示方式：

$foo: #00A9EC;

@mixin menu-color($name, $color) {
.custom-#{$name} a.level2,
.custom-#{$name} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color(profile, $foo);

然后在您的HTML <div class="custom-profile">。

中

这样，从现在起两年后，当你想把它变成黑色，并加下划线（或者其他什么）时，你不必深入挖掘你的html并添加一个新的＆＃39; .underlined-和 - 所有这些元素的黑色`类。您只需在一个地方更改SCSS。

Answer 2

在sass中，您可以使用map来执行此操作，您只需传递变量名而不是变量本身即可：

.bg-color-blue {
    background-color: #088DC6;
}

这将生成类：

@blue: #088DC6;

.generate-bg-color(@color) {
    .bg-color-@{color} {
        background-color: @@color;
    }
}

.generate-bg-color(~"blue");

通过使用大括号和双倍字符，您也可以使用标准变量以更少的方式实现此目标：

{{1}}

Sass / Compass从变量获取变量名称

2 个答案: