Sass/Compass 从变量中获取变量名 [英] Sass/Compass Getting variable name from variable

问题描述

我正在尝试制作一个 mixin，它可以让我根据您使用的变量名称创建改编的代码块.

I'm trying to make a mixin that will let me create adapted blocks of code depending on what variable name you up in.

$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; }

推荐答案

不应以特定颜色命名 CSS 类.你会后悔的.试想一下，如果您想稍后将颜色设置为红色，则需要返回所有 html 并更改类.

You should not name CSS classes after specific colors. You would regret that. Just think, if you want to make the color red later on, you would need to go back over all your html and change the classes.

我们使用 CSS 的原因是您不必在标记中嵌入样式信息.

The reason we have CSS is so that you don't have to embed style information in the markup.

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

Use a semantic class the describes the data, not how it is displayed:

$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">.

And then in your HTML <div class="custom-profile">.

这样，两年后当你想把它变成黑色和下划线(或其他)时，你就不必翻阅你的 html 并添加一个新的 '.underlined-and-black-color` 类所有这些元素.您只需在一处更改您的 SCSS.

That way, two years from now when you want to make it black, and underlined (or whatever), you don't have to dig through your html and add a new '.underlined-and-black-color` class to all of those elements. You just change your SCSS in one place.

这篇关于Sass/Compass 从变量中获取变量名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！