urls.less 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. @import "nested-gradient-with-svg-gradient/mixin-consumer.less";
  2. @font-face {
  3. src: url("/fonts/garamond-pro.ttf");
  4. src: local(Futura-Medium),
  5. url(fonts.svg#MyGeometricModern) format("svg");
  6. not-a-comment: url(//z);
  7. }
  8. #shorthands {
  9. background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
  10. background: url("img.jpg") center / 100px;
  11. background: #fff url(image.png) center / 1px 100px repeat-x scroll content-box padding-box;
  12. }
  13. #misc {
  14. background-image: url(images/image.jpg);
  15. }
  16. #data-uri {
  17. background: url(data:image/png;charset=utf-8;base64,
  18. kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
  19. k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
  20. kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
  21. background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
  22. background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
  23. background-image: url("http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700");
  24. }
  25. #svg-data-uri {
  26. background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
  27. }
  28. .comma-delimited {
  29. background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
  30. }
  31. .values {
  32. @a: 'Trebuchet';
  33. url: url(@a);
  34. }
  35. @import "import/import-and-relative-paths-test";
  36. #relative-url-import {
  37. .unquoted-relative-path-bg;
  38. .quoted-relative-path-border-image;
  39. }
  40. #data-uri {
  41. uri: data-uri('image/jpeg;base64', '../data/image.jpg');
  42. @var: replace('../data/replace.jpg', "replace", "image");
  43. background-image: data-uri(@var), data-uri(replace('../data/image.filext', "filext", "jpg"));
  44. uri-fragment: data-uri('image/jpeg;base64', '../data/image.jpg#fragment');
  45. }
  46. #data-uri-guess {
  47. uri: data-uri('../data/image.jpg');
  48. }
  49. #data-uri-ascii {
  50. uri-1: data-uri('text/html', '../data/page.html');
  51. uri-2: data-uri('../data/page.html');
  52. }
  53. #file-functions {
  54. uri: data-uri('../data/data-uri-fail.png');
  55. svg-not-base-64: data-uri('../data/image.svg');
  56. size: image-size('../data/data-uri-fail.png');
  57. width: image-width('../data/data-uri-fail.png');
  58. height: image-height('../data/data-uri-fail.png');
  59. }
  60. .add_an_import(@file_to_import) {
  61. @import "@{file_to_import}";
  62. }
  63. .add_an_import("file.css");
  64. #svg-functions {
  65. background-image: svg-gradient(to bottom, black, white);
  66. background-image: svg-gradient(to bottom, black, orange 3%, white);
  67. @green_5: green 5%;
  68. @orange_percentage: 3%;
  69. @orange_color: orange;
  70. background-image: svg-gradient(to bottom, (mix(black, white) + #444) 1%, @orange_color @orange_percentage, ((@green_5)), white 95%);
  71. }
  72. //it should work also inside @font-face #2035
  73. @font-face {
  74. font-family: 'MyWebFont';
  75. src: url(webfont.eot);
  76. src+: url('webfont.eot?#iefix');
  77. src+_: format('embedded-opentype');
  78. src+: url('webfont.woff') format('woff');
  79. src+: format('truetype');
  80. src+_: url('webfont.ttf');
  81. src+: url('webfont.svg#svgFontName') format('svg');
  82. }