extend-chaining.less 1.3 KB

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