math.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .unary {
  2. // all operators are parsable as unary operators, anything
  3. // but - throws an error right now though,
  4. // this gives two numbers
  5. sub: 10 -5;
  6. // add: 10 +5; // error
  7. // div: 10 /5; // error
  8. // mul: 10 *5; // error
  9. }
  10. .spaces {
  11. // we can make the parser do math by leaving out the
  12. // space after the first value, or putting spaces on both sides
  13. sub: 10-5;
  14. sub: 10 - 5;
  15. add: 10+5;
  16. add: 10 + 5;
  17. // div: 10/5; // this wont work, read on
  18. div: 10 / 5;
  19. mul: 10*5;
  20. mul: 10 * 5;
  21. }
  22. // these properties have divison not in parenthases
  23. .supress-division {
  24. border-radius: 10px / 10px;
  25. border-radius: 10px/10px;
  26. border-radius: hello (10px/10px) world;
  27. @x: 10px;
  28. font: @x/30 sans-serif;
  29. font: 10px / 20px sans-serif;
  30. font: 10px/20px sans-serif;
  31. border-radius:0 15px 15px 15px / 0 50% 50% 50%;
  32. }
  33. .parens {
  34. // if you are unsure, then just wrap the expression in parentheses and it will
  35. // always evaluate.
  36. // notice we no longer have unary operators, and these will evaluate
  37. sub: (10 -5);
  38. add: (10 +5);
  39. div: (10 /5);
  40. div: (10/5); // no longer interpreted as the shorthand
  41. mul: (10 *5);
  42. }
  43. .keyword-names {
  44. // watch out when doing math with keywords, - is a valid keyword character
  45. @a: 100;
  46. @b: 25;
  47. @a-: "hello";
  48. height: @a-@b; // here we get "hello" 25, not 75
  49. }
  50. .negation {
  51. hello: -(1px);
  52. hello: 0-(1px);
  53. @something: 10;
  54. hello: -@something;
  55. }
  56. // and now here are the tests
  57. .test {
  58. single: (5);
  59. single: 5+(5);
  60. single: (5)+((5));
  61. parens: (5 +(5)) -2;
  62. // parens: ((5 +(5)) -2); // FAILS - fixme
  63. math: (5 + 5)*(2 / 1);
  64. math: (5+5)*(2/1);
  65. width: 2 * (4 * (2 + (1 + 6))) - 1;
  66. height: ((2+3)*(2+3) / (9-4)) + 1;
  67. padding: (2px + 4px) 1em 2px 2;
  68. @var: (2 * 2);
  69. padding: (2 * @var) 4 4 (@var * 1px);
  70. width: (@var * @var) * 6;
  71. height: (7 * 7) + (8 * 8);
  72. margin: 4 * (5 + 5) / 2 - (@var * 2);
  73. }
  74. .percents {
  75. color: 100 * 10%;
  76. color: 10% * 100;
  77. color: 10% * 10%;
  78. color: 100px * 10%; // lessjs makes this px
  79. color: 10% * 100px; // lessjs makes this %
  80. color: 20% + 10%;
  81. color: 20% - 10%;
  82. color: 20% / 10%;
  83. }
  84. .misc {
  85. x: 10px * 4em;
  86. y: 10 * 4em;
  87. }
  88. .cond {
  89. y: 10 < 10;
  90. y: 10 >= 10;
  91. }