This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
On day 46, I’ve explained how you can order layers by defining them in a comma-separated list first. The first layer in the list has the lowest priority and the last layer the highest.
@layer base, components, theme, framework;You can create as many lists as so you want, but the important thing to remember is that layers are stacked based on the order in which they first appear. If you define one layer in multiple lists, only the first appearance of that layer matters.
@layer base, components, theme;
@layer framework, base, components;
@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;
}
}Although components is the last layer in the last list and therefore should have the highest priority, the color of the border is blue, as defined in the framework layer. That’s because base and components have already been defined earlier.
@layer base, components, theme;
@layer framework, base, components;
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.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-06T09:38:54+00:00) Day 52: declaring multiple layer lists. Retrieved from https://www.scien.cx/2022/12/06/day-52-declaring-multiple-layer-lists/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.