detached-rulesets.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @ruleset: {
  2. color: black;
  3. background: white;
  4. }
  5. @a: 1px;
  6. .wrap-mixin(@ruleset) {
  7. @a: hidden and if you see this in the output its a bug;
  8. @b: visible;
  9. @d: magic-frame; // same behaviour as mixin calls - falls back to this frame
  10. .wrap-selector {
  11. @c: visible;
  12. @ruleset();
  13. visible-one: @b;
  14. visible-two: @c;
  15. }
  16. }
  17. .wrap-mixin({
  18. color: black;
  19. one: @a;
  20. @b: hidden and if you see this in the output its a bug;
  21. @c: hidden and if you see this in the output its a bug;
  22. four: @d;
  23. });
  24. .wrap-mixin(@ruleset: {
  25. color: red;
  26. });
  27. .wrap-mixin(@ruleset);
  28. .desktop-and-old-ie(@rules) {
  29. @media screen and (min-width: 1200) { @rules() }
  30. html.lt-ie9 & { @rules() }
  31. }
  32. header {
  33. background: blue;
  34. .desktop-and-old-ie({
  35. background: red;
  36. });
  37. }
  38. .wrap-mixin-calls-wrap(@ruleset) {
  39. .wrap-mixin(@ruleset);
  40. };
  41. .wrap-mixin({
  42. test: extra-wrap;
  43. .wrap-mixin-calls-wrap({
  44. test: wrapped-twice;
  45. });
  46. });
  47. .wrap-mixin({
  48. test-func: unit(90px);
  49. test-arithmetic: unit((9+9), px);
  50. });
  51. // without mixins
  52. @ruleset-2: {
  53. b: 1;
  54. };
  55. .without-mixins {
  56. @ruleset-2();
  57. }
  58. @my-ruleset: {
  59. .my-selector {
  60. @media tv {
  61. background-color: black;
  62. }
  63. }
  64. };
  65. @media (orientation:portrait) {
  66. @my-ruleset();
  67. .wrap-media-mixin({
  68. @media tv {
  69. .triple-wrapped-mq {
  70. triple: true;
  71. }
  72. }
  73. });
  74. }
  75. .wrap-media-mixin(@ruleset) {
  76. @media widescreen {
  77. @media print {
  78. @ruleset();
  79. }
  80. @ruleset();
  81. }
  82. @ruleset();
  83. }
  84. // unlocking mixins
  85. @my-mixins: {
  86. .mixin() {
  87. test: test;
  88. }
  89. };
  90. @my-mixins();
  91. .a {
  92. .mixin();
  93. }
  94. // as mixin argument default
  95. .mixin-definition(@a: {}; @b: {default: works;};) {
  96. @a();
  97. @b();
  98. }
  99. .argument-default {
  100. .mixin-definition();
  101. .mixin-definition({direct: works;}; @b: {named: works;});
  102. }