operations.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. #operations {
  2. color: (#110000 + #000011 + #001100); // #111111
  3. color-2: (yellow - #070707);
  4. height: (10px / 2px + 6px - 1px * 2); // 9px
  5. width: (2 * 4 - 5em); // 3em
  6. .spacing {
  7. height: (10px / 2px+6px-1px*2);
  8. width: (2 * 4-5em);
  9. }
  10. subtraction: (20 - 10 - 5 - 5); // 0
  11. division: (20 / 5 / 4); // 1
  12. }
  13. @x: 4;
  14. @y: 12em;
  15. .with-variables {
  16. height: (@x + @y); // 16em
  17. width: (12 + @y); // 24em
  18. size: (5cm - @x); // 1cm
  19. }
  20. .with-functions {
  21. color: (rgb(200, 200, 200) / 2);
  22. color: (2 * hsl(0, 50%, 50%));
  23. color: (rgb(10, 10, 10) + hsl(0, 50%, 50%));
  24. }
  25. @z: -2;
  26. .negative {
  27. height: (2px + @z); // 0px
  28. width: (2px - @z); // 4px
  29. }
  30. .shorthands {
  31. padding: -1px 2px 0 -4px; //
  32. }
  33. .rem-dimensions {
  34. font-size: (20rem / 5 + 1.5rem); // 5.5rem
  35. }
  36. .colors {
  37. color: #123; // #112233
  38. border-color: (#234 + #111111); // #334455
  39. background-color: (#222222 - #fff); // #000000
  40. .other {
  41. color: (2 * #111); // #222222
  42. border-color: (#333333 / 3 + #111); // #222222
  43. }
  44. }
  45. .negations {
  46. @var: 4px;
  47. variable: (-@var); // 4
  48. variable1: (-@var + @var); // 0
  49. variable2: (@var + -@var); // 0
  50. variable3: (@var - -@var); // 8
  51. variable4: (-@var - -@var); // 0
  52. paren: (-(@var)); // -4px
  53. paren2: (-(2 + 2) * -@var); // 16
  54. }