less - 为什么 LESS 不覆盖在两个相同选择器中声明的属性？

Question

这是一个代码(test.less):

body {
    padding: 50px;
}

body {
    padding: 20px;
}

为什么在编译成 CSS 后我有这个:

body {
  padding: 50px;
}
body {
  padding: 20px;
}

我认为 LESS 会覆盖 body 类，而在 CSS 中我只有一个 body 类。

有办法吗？

Answer 1

在这方面，Less 与 CSS 没有任何不同。它所做的是重写嵌套块，如

body {
  padding: 50px;
  h1 {
    color: blue;
  }
}

进入

body {
  padding: 50px;
}
body h1 {
  color: blue;
}

因此，在 LESS 中，就像在 CSS 中一样，您编写选择器的顺序很重要，如果冲突无法通过 specificity 解决。 (请参阅 Nicolas Gallagher's post 有关其工作原理的更易读的解释)，作为一般经验法则，将应用最后出现的规则，从而覆盖较早的规则。