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

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 并向所有内容添加新的“.underlined-and-black-color”类那些元素。您只需在一处更改 SCSS 即可。