-
Couldn't load subscription status.
- Fork 3
Open
Labels
Description
Consider the following CSS:
.Block {
background: black;
@condition (width >= 100px) {
background: green;
}
&--blue {
@condition (width >= 100px) {
background: blue;
}
}
}Assuming there's a .Block and .Block .Block--blue element, both buttons will switch to green if wider than 100px.
This is because as the algorithm resolves the styles, it get's to the following query in the JSON:
{
"selector": ".Block",
"queries": [{
"conditions": [
[
["width", ">=", 100]
]
],
"elements": [{
"selector": ".Block",
"styles": {
"background": "green"
}
}]
}{
"conditions": [
[
["width", ">=", 100]
]
],
"elements": [{
"selector": ".Block--blue",
"styles": {
"background": "blue"
}
}]
}]
}Since the algorithm resolves from back-to-front, it'll first apply .Block--blue's, then .Block's styles.
That's how the green background gets applied last.