为什么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 的文章，了解其工作原理的更易读的解释），作为一般规则根据经验，将应用最后出现的规则，从而覆盖较早的规则。