variables.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. @a: 2;
  2. @x: (@a * @a);
  3. @y: (@x + 1);
  4. @z: (@x * 2 + @y);
  5. @var: -1;
  6. .variables {
  7. width: (@z + 1cm); // 14cm
  8. }
  9. @b: @a * 10;
  10. @c: #888;
  11. @fonts: "Trebuchet MS", Verdana, sans-serif;
  12. @f: @fonts;
  13. @quotes: "~" "~";
  14. @q: @quotes;
  15. @onePixel: 1px;
  16. .variables {
  17. height: (@b + @x + 0px); // 24px
  18. color: @c;
  19. font-family: @f;
  20. quotes: @q;
  21. }
  22. .redef {
  23. @var: 0;
  24. .inition {
  25. @var: 4;
  26. @var: 2;
  27. three: @var;
  28. @var: 3;
  29. }
  30. zero: @var;
  31. }
  32. @important-var: @c !important;
  33. @important-var-two: @a !important;
  34. .values {
  35. minus-one: @var;
  36. @a: 'Trebuchet';
  37. @multi: 'A', B, C;
  38. font-family: @a, @a, @a;
  39. color: @c !important;
  40. same-color: @important-var;
  41. same-again: @important-var !important;
  42. multi-important: @important-var @important-var, @important-var-two;
  43. multi: something @multi, @a;
  44. }
  45. .variable-names {
  46. .quoted {
  47. @var: 'hello';
  48. @name: 'var';
  49. name: @@name;
  50. }
  51. .unquoted {
  52. @var: 'hello';
  53. @name: var;
  54. name: @@name;
  55. }
  56. .color-keyword {
  57. @red: 'hello';
  58. @name: red;
  59. name: @@name;
  60. }
  61. }
  62. .alpha {
  63. @var: 42;
  64. filter: alpha(opacity=@var);
  65. }
  66. .polluteMixin() {
  67. @a: 'pollution';
  68. }
  69. .testPollution {
  70. @a: 'no-pollution';
  71. a: @a;
  72. .polluteMixin();
  73. a: @a;
  74. }
  75. .units {
  76. width: @onePixel;
  77. same-unit-as-previously: (@onePixel / @onePixel);
  78. square-pixel-divided: (@onePixel * @onePixel / @onePixel);
  79. odd-unit: unit((@onePixel * 4em / 2cm));
  80. percentage: (10 * 50%);
  81. pixels: (50px * 10);
  82. conversion-metric-a: (20mm + 1cm);
  83. conversion-metric-b: (1cm + 20mm);
  84. conversion-imperial: (1in + 72pt + 6pc);
  85. custom-unit: (42octocats * 10);
  86. custom-unit-cancelling: (8cats * 9dogs / 4cats);
  87. mix-units: (1px + 1em);
  88. invalid-units: (1px * 1px);
  89. .fallback {
  90. @px: 14px;
  91. @em: 1.4em;
  92. @cm: 10cm;
  93. div-px-1: (@px / @em);
  94. div-px-2: ((@px / @em) / @cm);
  95. sub-px-1: (@px - @em);
  96. sub-cm-1: (@cm - (@px - @em));
  97. mul-px-1: (@px * @em);
  98. mul-em-1: (@em * @px);
  99. mul-em-2: ((@em * @px) * @cm);
  100. mul-cm-1: (@cm * (@em * @px));
  101. add-px-1: (@px + @em);
  102. add-px-2: ((@px + @em) + @cm);
  103. mul-px-2: ((1 * @px) * @cm);
  104. mul-px-3: ((@px * 1) * @cm);
  105. }
  106. }