//simple case: @document .parent {
color:green; @document url-prefix() { .child { color:red; } }
}
//selectors joinings test .top {
@supports (sandwitch: butter) { .inside & { property: value; } }
}
@supports (sandwitch: bread) {
.in1 { .in2 { property: value; } }
}
.top {
.inside & { @supports (sandwitch: ham) { property: value; } }
}
//combined with @font-face which has different kind of body @supports (font-family: weirdFont) {
@font-face { font-family: something; src: made-up-url; }
}
@font-face {
@supports not (-webkit-font-smoothing: subpixel-antialiased) { font-family: something; src: made-up-url; }
}
//bubling through media @supports (property: value) {
.outOfMedia & { @media (max-size: 2px) { @supports (whatever: something) { property: value; } } }
}
.onTop & {
@supports (property: value) { @media (max-size: 2px) { @supports (whatever: something) { property: value; } } }
}
//long combination of supports and media @media print {
html { in-html: visible; @supports (upper: test) { in-supports: first; div { in-div: visible; @supports not (-webkit-font-smoothing: subpixel-antialiased) { in-supports: second; @media screen { font-weight: 400; nested { property: value; } } } } } }
}
//another long combination of supports and media @media print {
@media (max-size: 2px) { .in1 { stay: here; @supports not (-webkit-font-smoothing: subpixel-antialiased) { .in2 & { @supports (whatever: something) { property: value; } } } } }
}
//called from mixin .nestedSupportsMixin() {
font-weight: 300; -webkit-font-smoothing: subpixel-antialiased; @supports not (-webkit-font-smoothing: subpixel-antialiased) { font-weight: 400; nested { property: value; } }
}
html {
.nestedSupportsMixin;
}
// selectors should not propagate into all directive types .onTop {
@font-face { font-family: something; src: made-up-url; } @keyframes "textscale" { 0% { font-size : 1em; } 100% { font-size : 2em; } } animation : "textscale"; font-family : something;
}