较少混合重复属性 [英] LESS mixing duplicate properties

问题描述

使用LESS时，我发现有用的方法来混合类，以便基于其他类属性创建新的类，但是有时我需要覆盖它们.

When using LESS, i found usefull to mix classes, in order to create a new class based on other class properties, but sometimes i need to override them.

喜欢:

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

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

输出具有重复的属性:

The output has duplicated properties:

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

我知道有很多方法，例如dom上的多个类，甚至@extend可以构建多个选择器，但是导航器仍然在运行时覆盖属性.

I know there are multiple aproaches for this, like multiple classes on dom, or even @extend to build multiple selectors, but navigator still overriding at runtime the properties.

mixin时是否有任何重复相同属性的理由?似乎是制作独立"属性组的简单方法，但如果值重复，就不好了.

Is there any reason to duplicate same properties when mixin? Seems a simple way for making "independent" groups of properties, but not nice if has duplicated values.

推荐答案

LESS不考虑删除块中的重复属性，至少部分原因是

LESS does not account for removal of duplicate properties within a block, at least in part because of this reason stated here (quote slightly modified for grammar fix):

问题在于人们经常使用多个属性来顺序 为旧版浏览器提供后备功能.删除属性为 不是一般情况下会做的好事.

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在其回答中指出的内容，或者...

It is left up to the programmer to not program it for duplication. You can set up a basic mixin like what Danny Kijkov noted in his answer, or...

您可以详细介绍如何构建主按钮制造商mixin.像这样:

You can get elaborate in building a master button maker mixin. Something like this:

少(密信)

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

少(以各种方式使用混音)

.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.在最后一个示例中，我仅设置了前两个值，因此不需要放置任何变量名.

In case you did not know, note the above demonstrated LESS functionality of setting only some variables from the set of mixin variables. So for the first two specialized .makeBtn() calls, I only set a few variables, out of order from the mixin, by explicitly calling the variable name to set (e.g. @color: yellow). This allows me to "skip" over setting the @size. In the last example, I was only setting the first two values, so I did not need to put any variable names.

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

I don't know if the above helps you get what you want, but it does offer a different way of being able to reduce code size.

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

You mentioned :extend(), which could be well used here to avoid duplication:

很少

.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):

Solution #3

In your case, if all the buttons will be of either class .btn or a .btn_SOMETHING form, and you are not using .btn_ for anything else but buttons, then you might be able to just use the CSS cascade to apply styles and prevent duplication of CSS code like so (no special LESS required):

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类将覆盖设置为被覆盖的内容.

Any html with the class btn_warning will first get the base button styles from the attribute selector [class *= btn_] while the actual btn_warning class will override the things set to be overridden.

如果您在html中拆分类名(所以是class="btn warning"而不是class="btn_warning")，那么这样做可以避免重复:

If you split the class names in the html (so class="btn warning" rather than class="btn_warning"), then this works to avoid duplication:

LESS和CSS输出

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

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

这篇关于较少混合重复属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！