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

Question

这是一个代码（test.less）：

body {
    padding: 50px;
}

body {
    padding: 20px;
}

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

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

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

有办法吗？

Answer 1

对于CSS来说，Less与CSS没有任何不同。它做的是重写嵌套块，如

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

到

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

因此，在LESS中，就像在CSS中一样，编写选择器的顺序很重要，如果specificity无法解决冲突（请参阅Nicolas Gallagher's post以获得更可读的解释）这是如何工作的），作为一般经验法则，将应用最后出现的规则，从而覆盖先前的规则。