This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
By default, cascade layers are stacked in the order they are defined, but you don’t have to rely on it. You can determine the order in one place.
In the following example, the border color of the paragraph is first red, then blue, then rebeccapurple, and finally green.
@layer base {
p {
border: 10px solid red;
}
}
@layer framework {
p {
border-color: blue;
}
}
@layer components {
p {
border-color: rebeccapurple;
}
}
@layer theme {
p {
border-color: green;
}
}Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.
You can change that order by defining layers first in a comma-separated list, starting with @layer.
@layer base, components, theme, framework;
@layer base {
p {
border: 10px solid red;
}
}
@layer framework {
p {
border-color: blue;
}
}
@layer components {
p {
border-color: rebeccapurple;
}
}
@layer theme {
p {
border-color: green;
}
}Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.
The order of appearance of the @layer blocks doesn't matter any more, the order in the @layer list does. The border color of the paragraph is now first red, then rebeccapurple, then green, and finally blue.
Oh, and of course, if you add unlayered styles, those still win.
p {
border-color: hotpink;
}
@layer base, components, theme, framework;
@layer base {
p {
border: 10px solid red;
}
}
@layer framework {
p {
border-color: blue;
}
}
@layer components {
p {
border-color: rebeccapurple;
}
}
@layer theme {
p {
border-color: green;
}
}Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-28T00:00:00+00:00) Day 46: ordering layers. Retrieved from https://www.scien.cx/2022/11/28/day-46-ordering-layers-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.