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

【问题标题】：css code-duplication sophistically with LESS (or sass)使用 LESS（或 sass）进行复杂的 css 代码复制
【发布时间】：2013-08-01 22:47:21
【问题描述】：

我有这个（绿色按钮）：

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

谢谢

【问题讨论】：

标签： css sass less code-duplication

【解决方案1】：

你可以创建一个mixin：

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

    background-color:@color;

    /*existing code*/
}

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

.btn_red_circle { 
    .btn_circle(#ff0000); 
}

【讨论】：

@Symba 这应该不是问题，mixin 参数将在嵌套规则中可用。只需使用您现有的代码，但将值替换为参数。

【解决方案2】：

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

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

【讨论】：