使用LESS CSS定义变量变量

Question

假设我有三个单独的配色方案,用于网站的各个页面.每种颜色都定义了浅色,中色和深色,并且颜色方案由体内的类定义.假设"红色"颜色方案是默认颜色.像这样:

颜色定义:

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

基本默认样式示例

body { background-color: @red-dk;
  #container { background-color: @red-md;
     p { color: @red-dk; }
  }
}

不同颜色方案样式示例

body.green { background-color: @green-dk;
  #container { background-color: @green-md;
     p { color: @green-dk; }
  }
}

我想使用变量,这样我就不必重新编写每个方案的所有颜色变化,这样我就可以这样编写:

body.[color-var] { background-color: @[color-var]-dk;
  #container { background-color: @[color-var]-md;
     p { color: @[color-var]-dk; }
  }
}

......但我无法完全理解如何实现这一目标.救命…？

Answer 1

使用插值和转义,选择器和参数mixins中的括号来获得所需的效果:

• 通过插值的动态变量:在字符串中,"@{variable}"替换为变量的值.它们也可以被嵌套:鉴于@{@{var}-foo}和@var: bar;,结果是"barfoo".
  引用结果值.要删除这些引号,请添加前缀~.
• 通过选择器插值的动态选择器:body.@{var}变为body.bar.

例:

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    body.@{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

变成:

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

注意:最初写入答案时,不存在选择器插值.如果您正在使用旧的LESS编译器(在LESS 1.3.1a之前),请参阅解决方案的先前版本.在LESS 1.4.0中将删除对旧方法的支持.

Answer 2

如果这些值确实遵循这样的可预测格式,那么对于参数混合来说似乎是一个完美的例子:

减:

@red:   #232;
@green: #565;
@blue:  #898;


.theme (@color) {
  background-color: @color - #111;
  #container {
    background-color: @color;
    p { color: @color + #111; }
  }
}

body.red {
  .theme(@red);
}

编译CSS:

body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}

Answer 3

我知道这个问题已经很老了,但对于那些来这篇文章的人来说,我的回答可能会有所帮助

我不太确定你想要使用它,但我的一个建议是基于@ScottS答案.在我的现实世界中,我需要创建一个网络应用程序,它会显示几个品牌,每个品牌都有自己的文字颜色,背景等...所以我开始追逐一种方法来实现这一点,我是什么很容易在SASS上做,结果如下:

减

// Code from Seven Phase Max
// ............................................................
// .for
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}


// Brands
@dodge : "dodge";
@ford : "ford";
@chev : "chev";

// Colors
@dodge-color : "#fff";
@ford-color : "#000";
@chev-color : "#ff0";

// Setting variables and escaping than
@brands: ~"dodge" ~"ford" ~"chev";

// Define our variable   
.define(@var) {
  @brand-color: '@{var}-color';
}

// Starting the mixin
.color() {
    // Generating the loop to each brand
    .for(@brands); .-each(@name) {
        // After loop happens, it checks what brand is being called
        .define(@name);
         // When the brand is found, match the selector and color
        .brand-@{name} & {
            color: @@brand-color;
        }
    }
}

.carColor {
    .color();
}

结果将是:

CSS

.brand-dodge .carColor {
    color: "#fff";
}
.brand-ford .carColor {
    color: "#000";
}
.brand-chev .carColor {
    color: "#ff0";
}

这非常棘手,我不得不使用几个元素来获得我需要的东西,首先使用Seven Phase Max提供的一组mixins,你可以在这里找到它,而@ScottS的答案是我的拼图中遗漏的部分...希望这可以帮助您和其他需要创建一组变量的人成为另一个变量的一部分,并创建一个更动态更少的文件.

您可以复制我的整个代码并在http://lesstester.com/进行测试