定义使用更少的CSS可变变量定义使用更少的CSS可变变量(Defining Variable Var

说我有那些在网站各个页面中使用三个不同的配色方案。 每种颜色都有AA轻，中，黑暗定义色调和颜色方案是通过在本体中的类定义。 假设“红”的配色方案是默认的。 像这样：

颜色的定义 ：

@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:

使用插值和逃避的选择，并且括号参数混入取得预期的效果：

• 通过动态变量 插值 ：在一个字符串， "@{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编译工作（以前少1.3.1a）。 旧法的支持将在更短的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回答。 在我的现实世界里，我需要创建一个web应用程序，它会显示几个品牌，每个品牌都有自己的文字颜色，背景等等......于是我开始追的方式在更短的做到这一点，我可以很容易地做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";
}

这是非常棘手的，我不得不用几个要素来获得我需要的东西，先用一组由七期提供最大的混入，你可以找到它在这里 ，比的@ScottS答案是，失踪来回我砌片......希望这有助于你和别人说需要创建一组变量是另一个变量的一部分，并创建一个更加动态的少的文件。

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

Answer 4:

试试这个

@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;

@color: 'red-lt';

div{
background: @@color;
border: 1px solid lighten(@@color,20%);
}

Answer 5:

据我所知， 可变的变量名不LESS支持。 然而，你可以调整你的声明更语义方式：

/* declare palette */
@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; 

/* declare variables based on palette colors */
@lt: @red-lt;
@md: @red-md;
@dk: @red-dk;

/* ...and only use them for main declarations */
body { background-color: @dk;        
  #container { background-color: @md;        
     p { color: @dk; }        
  }        
}  

这应该让你的调色板之间通过避免明确的颜色引用相当轻松切换。

文章来源: Defining Variable Variables using LESS CSS