Question

我有这个（绿色按钮）：

.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或类似的东西）

由于

Answer 1

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

在LESS：

.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);
}

同样的事情

在Sass中

：

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

Answer 2

你可以创建一个mixin：

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

    background-color:@color;

    /*existing code*/
}

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

.btn_red_circle { 
    .btn_circle(#ff0000); 
}

使用LESS（或sass）进行复杂的css代码复制

2 个答案:

在LESS：

：