Question

我有以下按钮mixin：

.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版本......

Answer 1

没有其他办法可以做到这一点。 LESS 中的保护混合固定为您使用该格式而不是 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); }

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

Answer 2

是的，它可以完成

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

<强> LESS

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

少＆gt;在常量上定义变量

2 个答案:

是的，它可以完成