less-tests/test/fixtures/extend-chaining.less

LESS CSS test-suite. Run any kind of test on LESS stylesheets.

//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;
}

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