少混合重复属性

Question

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

喜欢:

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




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

mixin时有没有理由复制相同的属性？似乎是制作"独立"属性组的简单方法,但如果有重复值则不好.

    

Answer 1

LESS不考虑删除块内的重复属性,至少部分是因为此处所述的原因(引用稍微修改了语法修复):

问题是人们经常使用多个属性来为旧浏览器提供后备.删除属性不是一般做的好事.

程序员不需要对其进行编程以进行复制.你可以像Danny Kijkov在他的回答中所说的那样设置一个基本的混音,或者......

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

你可以精心构建一个主按钮制造商mixin.像这样的东西:

少(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):

较少和CSS输出

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

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

具有该类的任何html btn_warning将首先从属性选择器获取基本按钮样式,[class *= btn_]而实际的btn_warning类将覆盖设置为被覆盖的事物.

解决方案#4

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

较少和CSS输出

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

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