12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- //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) {};
|