08-27-周三_17-09-29

node_modules/less/test/less-bom/extend-chaining.less

@@ -0,0 +1,91 @@
+//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) {};