2

我有以下按钮混合：

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

4

2 回答 2

2

没有其他方法可以做到这一点。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%); 
    }
}

而且您只需将.rulesmixin 调用到您的每个 css 规则。

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

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

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

于 2013-07-26T16:03:20.313 回答
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;
}
于 2013-07-26T17:03:27.830 回答