4

我正在尝试制作一个 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; }
4

2 回答 2

2

不应以特定颜色命名 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 并为所有那些元素。您只需在一处更改 SCSS。

于 2013-04-21T00:12:24.813 回答
1

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

$colors: ( 
    -black: #000,
    -blue: #088DC6
);

@mixin generateBgColor($colorName) {
    .bg-color#{$colorName} {
        background-color: map-get($colors, $colorName);
    }
}

@include generateBgColor("-blue");

这将生成类：

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

只需使用大括号和 double at 字符，您也可以使用更少的标准变量来实现这一点：

@blue: #088DC6;

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

.generate-bg-color(~"blue");
于 2018-10-30T05:55:23.203 回答