更少混合重复属性

Question

在使用 LESS 时，我发现混合类很有用，以便基于其他类属性创建新类，但有时我需要覆盖它们。

喜欢:

<p></p>

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

.btn_warning {
  .btn;
  background-color: yellow;
  font-size: 12px;
}
</code></pre>

<p></p>

输出具有重复的属性:

<p></p>

<pre><code>.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;
}
</code></pre>

<p></p>

我知道有多种方法可以解决这个问题，比如 dom 上的多个类，甚至是 @extend 来构建多个选择器，但 navigator 在运行时仍然会覆盖属性。

混入时是否有任何理由重复相同的属性？似乎是一种制作“独立”属性组的简单方法，但如果有重复的值，那就不好了。

Answer 1

LESS 不考虑删除 block 内的重复属性，至少部分原因是 stated here (针对语法修复稍作修改的引用):

The trouble is that people frequently use multiple properties in order to provide a fallback for older browsers. Removing the properties is not something that it would be good to do generically.

程序员可以不对其进行重复编程。您可以设置一个基本的 mixin，就像 Danny Kijkov 在他的回答中提到的那样，或者......

解决方案 #1(复杂，但功能强大，可以完全定义)

您可以在构建主按钮制造商 mixin 时进行详细说明。像这样的:

LESS(混合)

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

LESS(以多种方式使用 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() 调用，我只设置了一些变量，从 mixin 中乱序，通过显式调用要设置的变量名称(例如 @color: yellow )。这允许我“跳过”设置 @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;
}

任何具有 btn_warning 类的 html 都会首先从属性选择器 [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;
}