在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。你可以使用父选择器(&)来修复这个问题:

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