.error {
border: 1px #f00; background: #fdd;
} .error.intrusion {
font-size: 1.3em; font-weight: bold;
} .intrusion .error {
display: none;
} .badError {
&:extend(.error all); border-width: 3px;
}
.foo .bar, .foo .baz {
display: none;
}
.ext1 .ext2 {
&:extend(.foo all);
}
.ext3, .ext4 {
&:extend(.foo all); &:extend(.bar all);
}
div.ext5, .ext6 > .ext5 {
width: 100px;
}
.ext7 {
&:extend(.ext5 all);
}
.ext8.ext9 {
result: add-foo;
} .ext8 .ext9, .ext8 + .ext9, .ext8 > .ext9 {
result: bar-matched;
} .ext8.nomatch {
result: none;
} .ext8 {
.ext9 { result: match-nested-bar; }
} .ext8 {
&.ext9 { result: match-nested-foo; }
}
.fuu:extend(.ext8.ext9 all) {} .buu:extend(.ext8 .ext9 all) {} .zap:extend(.ext8 + .ext9 all) {} .zoo:extend(.ext8 > .ext9 all) {}
.aa {
color: black; .dd { background: red; }
} .bb {
background: red; .bb { color: black; }
} .cc:extend(.aa,.bb) {} .ee:extend(.dd all,.bb) {} .ff:extend(.dd,.bb all) {}