misc.less 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. @color: #fff;
  2. @base_path: "/assets/images/";
  3. @images: @base_path + "test/";
  4. .topbar { background: url(@{images}topbar.png); }
  5. .hello { test: empty-function(@images, 40%, to(@color)); }
  6. .css3 {
  7. background-image: -webkit-gradient(linear, 0% 0%, 0% 90%,
  8. from(#E9A000), to(#A37000));
  9. }
  10. /**
  11. Here is a block comment
  12. **/
  13. // this is a comment
  14. .test, /*hello*/.world {
  15. border: 1px solid red; // world
  16. /* another property */
  17. color: url(http://mage-page.com);
  18. string: "hello /* this is not a comment */";
  19. world: "// neither is this";
  20. string: 'hello /* this is not a comment */' /*what if this is a comment */;
  21. world: '// neither is this' // hell world;
  22. ;
  23. what-/*something?*/ever: 100px;
  24. background: url(/*no comment here*/);
  25. }
  26. .urls {
  27. @var: "http://google.com";
  28. background: url(@var);
  29. background: url(@{var});
  30. background: url("@{var}");
  31. }
  32. .mix(@arg) { color: @arg; }
  33. @aaa: aaa;
  34. @bbb: bbb;
  35. // make sure the opening selector isn't too greedy
  36. .cool {.mix("@{aaa}, @{bbb}")}
  37. .cool();
  38. .cool("{hello");
  39. .cool('{hello');
  40. // merging of mixins
  41. .span-17 { float: left; }
  42. .span-17 { width: 660px; }
  43. .x {.span-17;}
  44. .hi {
  45. pre {
  46. color: red;
  47. }
  48. }
  49. .hi {
  50. pre {
  51. color: blue;
  52. }
  53. }
  54. .rad {
  55. .hi;
  56. }
  57. hello {
  58. numbers: 1.0 0.1 .1 1.;
  59. numbers: 1.0s 0.1s .1s 1.s;
  60. numbers: -1.0s -0.1s -.1s -1.s;
  61. numbers: -1.0 -0.1 -.1 -1.;
  62. }
  63. #string {
  64. hello: 'what\'s going on here';
  65. hello: 'blah blag @{ blah blah';
  66. join: 3434 + "hello";
  67. join: 3434 + hello;
  68. }