少添加带伪选择器的类

Question

我使用LESS,这是我的例子:

.arrow{
   color: red;
}
.arrow:before{
   content: ">";
}

.button{
  background: blue;
  .arrow;
  &:before{
    border: 1px solid;
  }
}

这是解析后的CSS:

.button{
   background: blue;
   color: red;
}
.button:before{
   border: 1px solid; // HERE IS NO  content: ">" !!!
}

如何添加:从.arrow类到我的按钮之前的样式？

Answer 1

您可以使用如下extend选项.它基本上也将arrow类的所有属性应用于button类.该all关键字意味着子类也延长.

减:

.button{
    background: blue;
    &:extend(.arrow all);
    &:before{
        border: 1px solid;
    }
}

编译CSS:

.arrow,
.button {
    color: red;
}
.arrow:before,
.button:before {
    content: ">";
}

@Sergey Kudryashov,为了以防万一,你需要记住`extend all`的黑暗面:如果代码中的某个地方你会有另一种`.arrow`风格,这种风格也将适用于你的`.button` (例如`#foo .bar.baz + div> p:hover.array {color:red}`也会将红色设置为你的按钮. (5认同)

Answer 2

我认为Extend功能应该可以解决问题:

.button { 
    &:extend(.arrow all);

    background: blue;
    &:before {
        border: 1px solid;
    }
}