scope.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. @x: red;
  2. @x: blue;
  3. @z: transparent;
  4. @mix: none;
  5. .mixin {
  6. @mix: #989;
  7. }
  8. @mix: blue;
  9. .tiny-scope {
  10. color: @mix; // #989
  11. .mixin;
  12. }
  13. .scope1 {
  14. @y: orange;
  15. @z: black;
  16. color: @x; // blue
  17. border-color: @z; // black
  18. .hidden {
  19. @x: #131313;
  20. }
  21. .scope2 {
  22. @y: red;
  23. color: @x; // blue
  24. .scope3 {
  25. @local: white;
  26. color: @y; // red
  27. border-color: @z; // black
  28. background-color: @local; // white
  29. }
  30. }
  31. }
  32. #namespace {
  33. .scoped_mixin() {
  34. @local-will-be-made-global: green;
  35. .scope {
  36. scoped-val: @local-will-be-made-global;
  37. }
  38. }
  39. }
  40. #namespace > .scoped_mixin();
  41. .setHeight(@h) { @height: 1024px; }
  42. .useHeightInMixinCall(@h) { .useHeightInMixinCall { mixin-height: @h; } }
  43. @mainHeight: 50%;
  44. .setHeight(@mainHeight);
  45. .heightIsSet { height: @height; }
  46. .useHeightInMixinCall(@height);
  47. .importRuleset() {
  48. .imported {
  49. exists: true;
  50. }
  51. }
  52. .importRuleset();
  53. .testImported {
  54. .imported;
  55. }
  56. @parameterDefault: 'top level';
  57. @anotherVariable: 'top level';
  58. //mixin uses top-level variables
  59. .mixinNoParam(@parameter: @parameterDefault) when (@parameter = 'top level') {
  60. default: @parameter;
  61. scope: @anotherVariable;
  62. sub-scope-only: @subScopeOnly;
  63. }
  64. #allAreUsedHere {
  65. //redefine top-level variables in different scope
  66. @parameterDefault: 'inside';
  67. @anotherVariable: 'inside';
  68. @subScopeOnly: 'inside';
  69. //use the mixin
  70. .mixinNoParam();
  71. }
  72. #parentSelectorScope {
  73. @col: white;
  74. & {
  75. @col: black;
  76. }
  77. prop: @col;
  78. & {
  79. @col: black;
  80. }
  81. }
  82. .test-empty-mixin() {
  83. }
  84. #parentSelectorScopeMixins {
  85. & {
  86. .test-empty-mixin() {
  87. should: never seee 1;
  88. }
  89. }
  90. .test-empty-mixin();
  91. & {
  92. .test-empty-mixin() {
  93. should: never seee 2;
  94. }
  95. }
  96. }