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。