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