91 lines
1.3 KiB
Plaintext
91 lines
1.3 KiB
Plaintext
//very simple chaining
|
|
.a {
|
|
color: black;
|
|
}
|
|
.b:extend(.a) {}
|
|
.c:extend(.b) {}
|
|
|
|
//very simple chaining, ordering not important
|
|
|
|
.d:extend(.e) {}
|
|
.e:extend(.f) {}
|
|
.f {
|
|
color: black;
|
|
}
|
|
|
|
//extend with all
|
|
|
|
.g.h {
|
|
color: black;
|
|
}
|
|
.i.j:extend(.g all) {
|
|
color: white;
|
|
}
|
|
.k:extend(.i all) {}
|
|
|
|
//extend multi-chaining
|
|
|
|
.l {
|
|
color: black;
|
|
}
|
|
.m:extend(.l){}
|
|
.n:extend(.m){}
|
|
.o:extend(.n){}
|
|
.p:extend(.o){}
|
|
.q:extend(.p){}
|
|
.r:extend(.q){}
|
|
.s:extend(.r){}
|
|
.t:extend(.s){}
|
|
|
|
// self referencing is ignored
|
|
|
|
.u {color: black;}
|
|
.v.u.v:extend(.u all){}
|
|
|
|
// circular reference because the new extend product will match the existing extend
|
|
|
|
.w:extend(.w) {color: black;}
|
|
.v.w.v:extend(.w all){}
|
|
|
|
// classic circular references
|
|
|
|
.x:extend(.z) {
|
|
color: x;
|
|
}
|
|
.y:extend(.x) {
|
|
color: y;
|
|
}
|
|
.z:extend(.y) {
|
|
color: z;
|
|
}
|
|
|
|
//very simple chaining, but with the extend inside the ruleset
|
|
.va {
|
|
color: black;
|
|
}
|
|
.vb {
|
|
&:extend(.va);
|
|
color: white;
|
|
}
|
|
.vc {
|
|
&:extend(.vb);
|
|
}
|
|
|
|
// media queries - don't extend outside, do extend inside
|
|
|
|
@media tv {
|
|
.ma:extend(.a,.b,.c,.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o,.p,.q,.r,.s,.t,.u,.v,.w,.x,.y,.z,.md) {
|
|
color: black;
|
|
}
|
|
.md {
|
|
color: white;
|
|
}
|
|
@media plasma {
|
|
.me, .mf {
|
|
&:extend(.mb,.md);
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
.mb:extend(.ma) {};
|
|
.mc:extend(.mb) {}; |