123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- .unary {
- // all operators are parsable as unary operators, anything
- // but - throws an error right now though,
- // this gives two numbers
- sub: 10 -5;
- // add: 10 +5; // error
- // div: 10 /5; // error
- // mul: 10 *5; // error
- }
- .spaces {
- // we can make the parser do math by leaving out the
- // space after the first value, or putting spaces on both sides
- sub: 10-5;
- sub: 10 - 5;
- add: 10+5;
- add: 10 + 5;
- // div: 10/5; // this wont work, read on
- div: 10 / 5;
- mul: 10*5;
- mul: 10 * 5;
- }
- // these properties have divison not in parenthases
- .supress-division {
- border-radius: 10px / 10px;
- border-radius: 10px/10px;
- border-radius: hello (10px/10px) world;
- @x: 10px;
- font: @x/30 sans-serif;
- font: 10px / 20px sans-serif;
- font: 10px/20px sans-serif;
- border-radius:0 15px 15px 15px / 0 50% 50% 50%;
- }
- .parens {
- // if you are unsure, then just wrap the expression in parentheses and it will
- // always evaluate.
- // notice we no longer have unary operators, and these will evaluate
- sub: (10 -5);
- add: (10 +5);
- div: (10 /5);
- div: (10/5); // no longer interpreted as the shorthand
- mul: (10 *5);
- }
- .keyword-names {
- // watch out when doing math with keywords, - is a valid keyword character
- @a: 100;
- @b: 25;
- @a-: "hello";
- height: @a-@b; // here we get "hello" 25, not 75
- }
- .negation {
- hello: -(1px);
- hello: 0-(1px);
- @something: 10;
- hello: -@something;
- }
- // and now here are the tests
- .test {
- single: (5);
- single: 5+(5);
- single: (5)+((5));
- parens: (5 +(5)) -2;
- // parens: ((5 +(5)) -2); // FAILS - fixme
- math: (5 + 5)*(2 / 1);
- math: (5+5)*(2/1);
- width: 2 * (4 * (2 + (1 + 6))) - 1;
- height: ((2+3)*(2+3) / (9-4)) + 1;
- padding: (2px + 4px) 1em 2px 2;
- @var: (2 * 2);
- padding: (2 * @var) 4 4 (@var * 1px);
- width: (@var * @var) * 6;
- height: (7 * 7) + (8 * 8);
- margin: 4 * (5 + 5) / 2 - (@var * 2);
- }
- .percents {
- color: 100 * 10%;
- color: 10% * 100;
- color: 10% * 10%;
- color: 100px * 10%; // lessjs makes this px
- color: 10% * 100px; // lessjs makes this %
- color: 20% + 10%;
- color: 20% - 10%;
- color: 20% / 10%;
- }
- .misc {
- x: 10px * 4em;
- y: 10 * 4em;
- }
- .cond {
- y: 10 < 10;
- y: 10 >= 10;
- }
|