Less 减少混合重复属性

当使用LESS时，我发现混合类是有用的，以便基于其他类属性创建一个新类，但有时我需要重写它们

比如：

输出具有重复的属性：

我知道有多种方法可以实现这一点，比如dom上的多个类，甚至@extend可以构建多个选择器，但navigator仍然在运行时覆盖属性

---

混入时是否有理由复制相同的属性？似乎是创建“独立”属性组的简单方法，但如果有重复的值，则不太好。

此解决方案如何

---

LESS不考虑删除块中的重复属性，至少部分原因是这样的（对于语法修复，引号稍微修改）：

问题是人们经常使用多个属性来排序 为较旧的浏览器提供回退。删除属性是非常困难的 一般来说，这不是一件好事

这是留给程序员不编程的重复。你可以像Danny Kijkov在回答中提到的那样建立一个基本的混音，或者

解决方案#1（复杂但功能强大，无法完全定义） 您可以在构建主按钮制造商mixin时进行详细说明。大概是这样的：

更少（混合）

.makeBtn（@ext:null；@rad:10px；@color:blue；@size:10px；）{
.set-extension（）时（@ext=null）{
@类扩展：~''；
}
.set-extension（）当不是（@ext=null）{
@类扩展名：~''{ext}'；
}
.set-extension（）；
.btn@{class extension}{
边界半径：@rad；
背景色：@色；
字号：@size；
//在此根据扩展定义各种添加
.specialExtensionProps（）当（@ext=danger）{
边框：3倍纯红；
}
.specialExtensionProps（）当（@ext=someExtName）{
我的特别道具：是的；
}
.specialExtensionProps（）；
}  
}

LESS（以各种方式使用混音器）

.makeBtn（）//制作基本按钮
.makeBtn（警告；@颜色：黄色；@大小：12px）//制作修改过的按钮
.makeBtn（危险；@color:red；）//制作修改过的按钮
.makeBtn（somextname，15px）//制作修改过的按钮

CSS输出

.btn{
边界半径：10px；
背景色：#0000ff；
字体大小：10px；
}
.btn_警告{
边界半径：10px；
背景色：#ffff00；
字体大小：12px；
}
.btn_危险{
边界半径：10px；
背景色：#ff0000；
字体大小：10px；
边框：3倍纯红；
}
.btn_somextname{
边界半径：15px；
背景色：#0000ff；
字体大小：10px；
我的特别道具：是的；
}

如果您不知道，请注意，上面演示的仅设置mixin变量集中的一些变量的功能较少。因此，对于前两个专门的

.makeBtn（）

调用，我只通过显式调用要设置的变量名（例如

@color:yellow

）来设置几个变量，这与mixin的顺序不符。这允许我“跳过”设置

@size

。在上一个示例中，我只设置了前两个值，因此不需要输入任何变量名

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

解决方案#2 您提到了

：extend（）

，这里可以很好地使用它来避免重复：

更少

.btn{
边界半径：10px；
背景颜色：蓝色；
字体大小：10px；
}
.btn_警告{
&：扩展（.btn）；
背景颜色：黄色；
字体大小：12px；
}

CSS输出

.btn，
.btn_警告{
边界半径：10px；
背景颜色：蓝色；
字体大小：10px；
}
.btn_警告{
背景颜色：黄色；
字体大小：12px；
}

解决方案#3 在您的情况下，如果所有按钮都属于类

.btn

或

.btn\u SOMETHING

形式，并且除了按钮之外，您没有使用

.btn\u

进行任何其他操作，那么您可能只需要使用CSS级联来应用样式并防止类似的CSS代码重复（无需特别说明）：

更少和CSS输出

.btn[class*=btn\ux]{
边界半径：10px；
背景颜色：蓝色；
字体大小：10px；
}
.btn_警告{
背景颜色：黄色；
字体大小：12px；
}

任何带有类

btn\u warning

的html将首先从属性选择器

[class*=btn\u]

获取基本按钮样式，而实际的

btn\u warning

类将覆盖设置为覆盖的内容

解决方案#4 如果在html中拆分类名（因此

class=“btn warning”

而不是

class=“btn\u warning”

），则这可以避免重复：

更少和CSS输出

.btn{
边界半径：10px；
背景颜色：蓝色；
字体大小：10px；
}
.btn.警告{
背景颜色：黄色；
字体大小：12px；
}

Thank you似乎是在mixin中重写类属性时避免重复的最佳方法，提醒参数有点繁琐。仍然在想是否需要这种行为，或者可以是一个维护定义属性字典和避免重复的请求。现在我理解了原因，非常友好的回答。就浏览器性能而言，一般来说，您认为在解决方案#1中生成的输出大且冗余的单个类比在#2、#3或#4中生成的更复杂的选择器更好吗？这似乎是一个大小与cpu的事实。因为我正在进行预处理，所以我觉得输出必须是“丑陋”的，但经过优化。如果你想发表意见，就我个人而言，如果html可以修改的话，我会选择#4。否则，我可能会使用#2。但这一切都取决于应用。Cpu时间几乎与渲染无关。

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

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



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

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

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

.btn_warning {
    .btn(12px, yellow);
}