Less > 在常量上定义变量答案

【问题标题】：Less > Define variable on constantLess > 在常量上定义变量
【发布时间】：2013-07-26 15:27:21
【问题描述】：

我有以下按钮混合：

.Button(@type) {

  color: @White; 

  &:hover {color: @White;} // :hover

} // Button

.Button(@type) when (@type = 'Delete') {

  background-color: lighten(@Red, 20%);
  border: 1px solid lighten(@Red, 20%); 

  &:hover {
    background-color: lighten(@Red, 12%);
    border: 1px solid lighten(@Red, 12%); 
  } // :hover

} // Button

.Button(@type) when (@type = 'Search') {

  background-color: lighten(@Blue, 20%);
  border: 1px solid lighten(@Blue, 20%); 

  &:hover {
    background-color: lighten(@Blue, 12%);
    border: 1px solid lighten(@Blue, 12%); 
  } // :hover

} // Button

这工作正常，如您所见，每个按钮的变化是颜色。

如果可能只有一个 Mixin 并根据类型定义一个颜色变量。

这样我就不需要使用那么多 Button mixin 版本了...

【问题讨论】：

标签： variables less mixins

【解决方案1】：

没有其他方法可以做到这一点。 LESS 中的受保护的 mixins 固定为您使用该格式而不是 if/else 语句。但在你的情况下，我建议这样做：

//create a mixin for global rules.
.rules(@color){
    background-color: lighten(@color, 20%);
    border: 1px solid lighten(@color, 20%); 

    &:hover {
       background-color: lighten(@color, 12%);
       border: 1px solid lighten(@color, 12%); 
    }
}

而你只需调用 .rules mixin 来处理你的每一个 CSS 规则。

.Button(@type) when (@type = 'Delete') {
    .rules(@Red);
}

.Button(@type) when (@type = 'Search') {
    .rules(@Blue);
}

这样更简单，不需要很多空间来编写相同的代码。希望这会有所帮助。

【讨论】：

其实是有办法的。不要从您的解决方案中删除，因为它是完全有效的，但它仍然必须使用受保护的 mixin 调用。有一种方法可以在没有这样的调用的情况下做到这一点（见我的回答）。

【解决方案2】：

是的，可以的

它可以折叠成一个 mixin，使用 @type 通过创造性地使用可变变量来切换颜色值。

少

@White: #fff;
@Red: #f00;
@Blue: #00f;

.Button(@type) {
  //define the variables with the name 
  //of the button you want to pass: Delete, Search, etc.
  //associated to the color variable you desire
  @Delete: @Red;
  @Search: @Blue;
  //set up a generic variable name to use, and
  //then call the color value through a variable variable call (@@)
  @ContrastColor: @@type;

  color: @White;   
  background-color: lighten(@ContrastColor, 20%);
  border: 1px solid lighten(@ContrastColor, 20%); 

  &:hover {
    color: @White;
    background-color: lighten(@ContrastColor, 12%);
    border: 1px solid lighten(@ContrastColor, 12%); 
  } // :hover

} // Button

.deleteClass {
  .Button(Delete);
}

.searchClass {
  .Button(Search);  
}

CSS 输出

.deleteClass {
  color: #ffffff;
  background-color: #ff6666;
  border: 1px solid #ff6666;
}
.deleteClass:hover {
  color: #ffffff;
  background-color: #ff3d3d;
  border: 1px solid #ff3d3d;
}
.searchClass {
  color: #ffffff;
  background-color: #6666ff;
  border: 1px solid #6666ff;
}
.searchClass:hover {
  color: #ffffff;
  background-color: #3d3dff;
  border: 1px solid #3d3dff;
}

【讨论】：