基于祖先类的LessCss动态变量答案

【问题标题】：LessCss dynamic variables based on ancestor class基于祖先类的LessCss动态变量
【发布时间】：2014-11-10 14:53:42
【问题描述】：

我有一个页面模板，它在 body 元素上有一个品牌类：

<body class="brand-africa">
    <h1>Africa</h1>
</body>

使用下面的 Less，我可以使用变量作为品牌颜色并将其应用于 CSS 选择器的 color：

@brand-default: #649d84;
@brand-africa: #df6f20;
@brand-nz: #444;

.brand-color {
    .brand-default & {
        color: @brand-default;
    }
    .brand-africa & {
        color: @brand-africa;
    }
    .brand-nz & {
        color: @brand-nz;
    }
}

h1 {
    .brand-color;
}

这很好用，但有时我想将颜色应用于另一个 CSS 声明 - 例如 background-color，并且要使用上面的代码执行此操作，我需要复制 .brand-color 混合来代替应用 @987654327 @。

理想情况下，我希望 mixin 返回一个变量 - 我知道这是可能的，但我不知道如何使用类名来确定返回值。

【问题讨论】：

标签： variables less mixins

【解决方案1】：

好吧，不，您不能使用类名来确定变量或返回值。所以通常是反过来做的，比如这样：

@brand-default: #649d84;
@brand-africa:  #df6f20;
@brand-nz:      #444444;

h1 {
    .brand-colors();
}

h2 {
    .brand-colors(background-color);
}

.brand-colors(@property: color) {
    .color(default);
    .color(africa);
    .color(nz);

    .color(@name) {
        .brand-@{name} & {
            @value: 'brand-@{name}';
            @{property}: @@value;
        }
    }
}

或者像这样：

@brand-default: #649d84;
@brand-africa:  #df6f20;
@brand-nz:      #444444;

h1 {
    .brand-colors({
        color: @color;
    });
}

h2 {
    .brand-colors({
        background-color: @color;
    });
}

.brand-colors(@style) {
    .brand-color(default);
    .brand-color(africa);
    .brand-color(nz);
}

.brand-color(@name) {
    .brand-@{name} & {
        @value: ~'brand-@{name}';
        @color: @@value;
        @style();
    }
}

甚至像这样：

.brand(default) {@{color}: #649d84}
.brand(africa)  {@{color}: #df6f20}
.brand(nz)      {@{color}: #444444}

h1 {
    .brand-colors();
}

h2 {
    .brand-colors(background-color);
}

.brand-colors(@color: color) {
    .-(default);
    .-(africa);
    .-(nz);

    .-(@name) {
        .brand-@{name} & {
            .brand(@name);
        }
    }
}

或者介于两者之间。或者......哦等等，这些东西有整个系列的方法（包括各种组合），例如：

通常基于列表/数组/循环的方法更紧凑，虽然我个人更喜欢这样的笨方法：

.themed({

    h1 {
        color: @color;
    }

    h2 {
        background-color: @color;
    }

});

.themed(@styles) {
    .-(default, #649d84);
    .-(africa,  #df6f20);
    .-(nz,      #444444);

    .-(@name, @color) {
        .brand-@{name} {
            @styles();
        }
    }
}

【讨论】：

谢谢，这是一个很棒的方法。我将接受最后一个建议 - 不确定为什么其中一些有效（“.-”？）但它有效！
.- 只是一个 mixin（我经常将这个简短的 mixin 名称用于实用程序/辅助 mixin，以免代码混乱）。
哦，当然。非常有道理，非常感谢您的帮助！