Why LESS doesn't override a property declared in two same selector?

Question

Here is a code (test.less):

body {
    padding: 50px;
}

body {
    padding: 20px;
}

Why after compiling to CSS I have this:

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

I thought that LESS would override body class and in CSS I'd have only one body class.

Is there way to do it?

Answer 1

Less does not work any different to CSS when it comes to that. What it does do is to rewrite nested blocks like

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

into

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

Hence in LESS, just like in CSS, the order in which you write your selectors does matter, and if conflicts can't be resolved by specificity (see Nicolas Gallagher's post for a more readable explanation on how this works), as a general rule-of-thumb, the rule appearing last will be applied, thus overriding the earlier ones.