css - LESS 使用伪选择器添加类

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 类中的 :before 伪元素添加到我的按钮？

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: ">";
}