apps/wiki/static--wiki--editor--node_modules--grunt-contrib-less--node_modules--less--test/less/extend-chaining.less

   1 //very simple chaining
   2 .a {
   3   color: black;
   4 }
   5 .b:extend(.a) {}
   6 .c:extend(.b) {}
   7
   8 //very simple chaining, ordering not important
   9
  10 .d:extend(.e) {}
  11 .e:extend(.f) {}
  12 .f {
  13   color: black;
  14 }
  15
  16 //extend with all
  17
  18 .g.h {
  19   color: black;
  20 }
  21 .i.j:extend(.g all) {
  22   color: white;
  23 }
  24 .k:extend(.i all) {}
  25
  26 //extend multi-chaining
  27
  28 .l {
  29   color: black;
  30 }
  31 .m:extend(.l){}
  32 .n:extend(.m){}
  33 .o:extend(.n){}
  34 .p:extend(.o){}
  35 .q:extend(.p){}
  36 .r:extend(.q){}
  37 .s:extend(.r){}
  38 .t:extend(.s){}
  39
  40 // self referencing is ignored
  41
  42 .u {color: black;}
  43 .v.u.v:extend(.u all){}
  44
  45 // circular reference because the new extend product will match the existing extend
  46
  47 .w:extend(.w) {color: black;}
  48 .v.w.v:extend(.w all){}
  49
  50 // classic circular references
  51
  52 .x:extend(.z) {
  53   color: x;
  54 }
  55 .y:extend(.x) {
  56   color: y;
  57 }
  58 .z:extend(.y) {
  59   color: z;
  60 }
  61
  62 //very simple chaining, but with the extend inside the ruleset
  63 .va {
  64   color: black;
  65 }
  66 .vb {
  67   &:extend(.va);
  68   color: white;
  69 }
  70 .vc {
  71   &:extend(.vb);
  72 }
  73
  74 // media queries - dont extend outside, do extend inside
  75
  76 @media tv {
  77   .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) {
  78     color: black;
  79   }
  80   .md {
  81     color: white;
  82   }
  83   @media plasma {
  84     .me, .mf {
  85       &:extend(.mb,.md);
  86       background: red;
  87     }
  88   }
  89 }
  90 .mb:extend(.ma) {};
  91 .mc:extend(.mb) {};