html - 在LESS中，如何重写这个CSS组合样式？

Question

这是我的 CSS 片段:

div.header {
  border: 1px solid #842210;
}
div.header#id {
  position: relative;
}

我认为下面的 LESS 代码可能有效，但实际上没有:

@border-width: 1px;
@red: #842210;
div.header {
    #id {
    position: relative;
  }
    border: @border-width solid @red;
} 

有没有人知道如何用 LESS 重写 CSS 代码？

Answer 1

按照您的方式，您将选择 div.header #id 而不是 div.header#id。您可以使用 parent selector 修复该问题(&):

div.header {

  &#id {
    position: relative;
  }

  border: @border-width solid @red;

}