1

我有这个（一个绿色按钮）：

.btn_green_circle { width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color:#50B848; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #C8C8C9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

我想做同样的按钮但红色（我不能使用额外的类，如：.btn.red_circle）所以我需要再次编写相同的代码，但背景颜色发生了变化。（我可以这样做 - 常见的样式：

 .btn_green_circle, .btn_red_circle { ... }

但想知道是否）

使用 LESS 或 SASS 是否有更复杂的方法？（比如一些mixin或类似的东西）

谢谢

4

2 回答 2

3

您可以将按钮的所有属性（您已经在规则中定义）打包到一个 mixin 中......并调整您不想在按钮之间更改的所有参数（如您的情况下的颜色）。

少于：

.button(@color){
    width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color:@color; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #c8c8c9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

（注意 - 如果需要，您还可以在 mixin 中使用颜色函数和计算，以实现在 mixin 参数中传递的颜色的多种色调）

然后你只需调用 mixin 并传递所需的参数（你的#50B848颜色或在这个例子中我做的red）：

.btn_red_circle { 
  .button(red);
}

同样的事情

在萨斯：

@mixin button($color) {
    width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color: $color; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #c8c8c9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

.btn_red_circle { 
  @include button(red);
}

在 LESS 和 Sass 中，CSS输出将对应于：

.btn_red_circle {
  width: 13px;
  height: 13px;
  position: relative;
  border-radius: 7px;
  border: 1px solid transparent;
}
.btn_red_circle:after {
  content: ' ';
  width: 9px;
  height: 9px;
  background-color: #ff0000;
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 5px;
  filter: alpha(opacity=70);
  opacity: 0.7;
  display: block;
}
.btn_red_circle.active,
.btn_red_circle:hover {
  border: 1px solid #c8c8c9;
}
.btn_red_circle.active:after,
.btn_red_circle:hover:after {
  filter: alpha(opacity=100);
  opacity: 1;
}
于 2013-08-01T11:56:12.423 回答
1

您可以创建一个 mixin ：

.btn_circle (@color) { 
    /*existing code*/

    background-color:@color;

    /*existing code*/
}

.btn_green_circle { 
    .btn_circle(#50B848); 
}

.btn_red_circle { 
    .btn_circle(#ff0000); 
}
于 2013-08-01T07:54:19.017 回答