较少混合重复属性

LESS不占一个块中去除重复的属性，至少在因为这样的原因一部分在这里说（报价略有修改语法修正）：

问题在于人们经常使用多个属性来为较旧的浏览器提供后备功能。一般而言，删除属性不是一件好事。

由程序员决定不对其进行重复编程。您可以设置基本的mixin，例如Danny Kijkov在回答中指出的内容，或者...

解决方案1（复杂，但功能强大，可以完全定义）

您可以详细介绍如何构建主按钮生成器mixin。像这样的东西：

LESS (Mixin)

.makeBtn(@ext: null; @rad: 10px; @color: blue; @size: 10px;) {
  .set-extension() when (@ext = null) {
    @class-extension: ~'';
  }
  .set-extension() when not (@ext = null) {
    @class-extension: ~'_@{ext}';
  }
  .set-extension();

  .btn@{class-extension} {
    border-radius: @rad;
    background-color: @color;
    font-size: @size;

    //define various addtions based on extensions here
    .specialExtensionProps() when (@ext = danger) {
      border: 3px solid red;
    }
    .specialExtensionProps() when (@ext = someExtName) {
      my-special-prop: yep;
    }
    .specialExtensionProps();
  }  
}

较少（以各种方式使用Mixin）

.makeBtn(); //makes base button
.makeBtn(warning; @color: yellow; @size: 12px); //makes modified button 
.makeBtn(danger; @color: red;); //makes modified button
.makeBtn(someExtName, 15px); //makes modified button

CSS输出

.btn {
  border-radius: 10px;
  background-color: #0000ff;
  font-size: 10px;
}
.btn_warning {
  border-radius: 10px;
  background-color: #ffff00;
  font-size: 12px;
}
.btn_danger {
  border-radius: 10px;
  background-color: #ff0000;
  font-size: 10px;
  border: 3px solid red;
}
.btn_someExtName {
  border-radius: 15px;
  background-color: #0000ff;
  font-size: 10px;
  my-special-prop: yep;
}

如果您不知道，请注意上面展示的LESS功能，即仅设置mixin变量集中的一些变量。因此，对于前两个专门的.makeBtn()调用，我仅通过显式调用要设置的变量名称（例如@color: yellow）来设置一些变量（与mixin顺序不符）。这使我可以“跳过”设置@size。在最后一个示例中，我仅设置了前两个值，因此不需要放置任何变量名。

我不知道上面的内容是否可以帮助您获得所需的内容，但是它确实提供了减少代码大小的另一种方法。

解决方案＃2

您提到了:extend()，可以在这里很好地使用它来避免重复：

较少的

.btn {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn_warning {
  &:extend(.btn);
  background-color: yellow;
  font-size: 12px;
}

CSS输出

.btn,
.btn_warning {
  border-radius: 10px;
  background-color: blue;
  font-size: 10px;
}
.btn_warning {
  background-color: yellow;
  font-size: 12px;
}

解决方案＃3

在您的情况下，如果所有按钮都是类.btn或.btn_SOMETHING表单，并且.btn_除了按钮之外，您不使用其他任何东西，那么您可以只使用CSS级联来应用样式并防止CSS代码重复，就像这样（无需特殊的LESS）：

LESS和CSS输出

.btn, [class *= btn_] {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn_warning {
  background-color: yellow;
  font-size: 12px;
}

具有该类的任何htmlbtn_warning首先将从属性选择器中获取基本按钮样式，[class *= btn_]而实际的btn_warning类将覆盖设置为要覆盖的内容。

解决方案＃4

如果您在html中拆分类名（class="btn warning"而不是class="btn_warning"），则可以避免重复：

LESS和CSS输出

.btn {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn.warning {
  background-color: yellow;
  font-size: 12px;
}