strings.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. #strings {
  2. background-image: url("http://son-of-a-banana.com");
  3. quotes: "~" "~";
  4. content: "#*%:&^,)!.(~*})";
  5. empty: "";
  6. brackets: "{" "}";
  7. escapes: "\"hello\" \\world";
  8. escapes2: "\"llo";
  9. }
  10. #comments {
  11. content: "/* hello */ // not-so-secret";
  12. }
  13. #single-quote {
  14. quotes: "'" "'";
  15. content: '""#!&""';
  16. empty: '';
  17. semi-colon: ';';
  18. }
  19. #escaped {
  20. filter: ~"DX.Transform.MS.BS.filter(opacity=50)";
  21. }
  22. #one-line { image: url(http://tooks.com) }
  23. #crazy { image: url(http://), "}", url("http://}") }
  24. #interpolation {
  25. @var: '/dev';
  26. url: "http://lesscss.org@{var}/image.jpg";
  27. @var2: 256;
  28. url2: "http://lesscss.org/image-@{var2}.jpg";
  29. @var3: #456;
  30. url3: "http://lesscss.org@{var3}";
  31. @var4: hello;
  32. url4: "http://lesscss.org/@{var4}";
  33. @var5: 54.4px;
  34. url5: "http://lesscss.org/@{var5}";
  35. }
  36. // multiple calls with string interpolation
  37. .mix-mul (@a: green) {
  38. color: ~"@{a}";
  39. }
  40. .mix-mul-class {
  41. .mix-mul(blue);
  42. .mix-mul(red);
  43. .mix-mul(black);
  44. .mix-mul(orange);
  45. }
  46. @test: Arial, Verdana, San-Serif;
  47. .watermark {
  48. @family: ~"Univers, @{test}";
  49. family: @family;
  50. }
  51. #iterated-interpolation {
  52. @box-small: 10px;
  53. @box-large: 100px;
  54. .mixin { // both ruleset and mixin
  55. width: ~"@{box-@{suffix}}";
  56. weird: ~"@{box}-@{suffix}}";
  57. width-str: "@{box-@{suffix}}";
  58. weird-str: "@{box}-@{suffix}}";
  59. @box: ~"@{box";
  60. @suffix: large;
  61. }
  62. .interpolation-mixin {
  63. .mixin(); //call the above as mixin
  64. }
  65. }