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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With