Is property redeclaration in CSS selector query always equivalent to just the very last property declaration?

user_360811 0
Viewed 43

I'm investigating how modern CSS preprocessors behave and noticed that both SASS and LESS actually do nothing when encounter property redeclaration in the same query, For instance this code (valid in both of above-mentioned preprocessors):

.some {
  color: red;
  color: yellow;
  color: maroon;
}

will be translated exactly the same way, without changes, that is, we'll get, again:

.some {
  color: red;
  color: yellow;
  color: maroon;
}

My question would be - are there any CSS properties that make sense to be declared in the same selector query N times where the effect of this declaration is not equivalent to just leaving the very last declaration (in this case - color: maroon).

Keep in mind that I'm not necessarily asking why preprocessor were designed this way. If there are such properties, than it will be the answer. If there are not, it can make sense for some other reasons, say, performance which is out of scope of this question.

less sass css
1 Answers

I suppose, in cases where you're asking for property considered as invalid by some browser. For instance:

.some {
  background:  background: rgb(61,217,0);
  background:  linear-gradient(328deg, rgba(61,217,0,1) 0%, rgba(12,242,187,1) 100%);
}

Also, in the case you're using a fetched image, you may be able to show it along a background color, as shown there or here:

.some {
  background: var(--fallback-color)  url('https://possibly.dead.com/but/pretty_img');
}

So, if the link is dead, the background color still shows up.

user_140084470
Related