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 中一样，您编写选择器的顺序确实很重要，并且如果冲突不能通过特定性来解决（请参阅Nicolas Gallagher 的帖子以获得关于其工作原理的更易读的解释），作为一般规则-of-thumb，最后出现的规则将被应用，从而覆盖之前的规则。