使用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

在选择器和参数混合中使用插值和转义，括号可获得所需的效果

• 动态变量** 由内插：在一个串，"@{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之前），请参阅上一版本的解决方案。在LESS1.4.0中将不再支持旧方法。