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关键字表示子类也被扩展。

<强> LESS：

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

已编译的CSS：

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

Answer 2

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

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

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