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

使用interpolation和 escaping , 选择器中的括号和 parametric mixins获得预期的效果:

• 动态变量 by interpolation : 在字符串中，"@{variable}" 被替换为变量的值。它们也可以嵌套:给定 @{@{var}-foo} 和 @var: bar;，结果是 "barfoo" .
  结果值被引用。要删除这些引号，请添加前缀 ~。
• 动态选择器 by Selector interpolation : 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 将不再支持旧方法。