Hi Kathryn, Chrome developer here. There's a small error in how to create the layer stack. The layer order is determined by the source order of all the @layer rules and the layered @import rules. So in your example in Importing Layers, the actual layer stack is kendo, reset, app because kendo is the first layer seen by the browser (in the import rule).
To make it work, we should put the @layer statement before the import:
(Btw @layer statements are specifically allowed before imports, so this is correct CSS. @layer {...} blocks, like other regular rules, are not allowed though)
For this reason, it's recommended to create the layer stack before the imports, not after.
Does @layers support @import of preprocessor files?
I tried with LESS, my LESS variable defined in Layer-1 didn't work when I called that variable inside Layer-2.
Hi Kathryn, Chrome developer here. There's a small error in how to create the layer stack. The layer order is determined by the source order of all the
@layerrules and the layered@importrules. So in your example in Importing Layers, the actual layer stack iskendo, reset, appbecausekendois the first layer seen by the browser (in the import rule).To make it work, we should put the
@layerstatement before the import:(Btw
@layerstatements are specifically allowed before imports, so this is correct CSS.@layer {...}blocks, like other regular rules, are not allowed though)For this reason, it's recommended to create the layer stack before the imports, not after.
Ah, thank you so much! I really appreciate the correction :) I'll get that updated in the article right away.
Does
@layerssupport@importof preprocessor files?I tried with LESS, my LESS variable defined in Layer-1 didn't work when I called that variable inside Layer-2.
@layer layer-1 {
@mobile: 620px;
}
@layer layer-2 {
@media (min-width: @mobile) { // this didn't work
h1 {
font-size: 36px;
}
}
}
you can check this on Codepen as well.
Browsers can only support native CSS, so it will be the preprocessors' job to support that.