functions.less 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. #functions {
  2. @var: 10;
  3. @colors: #000, #fff;
  4. color: _color("evil red"); // #660000
  5. width: increment(15);
  6. height: undefined("self");
  7. border-width: add(2, 3);
  8. variable: increment(@var);
  9. background: linear-gradient(@colors);
  10. }
  11. #built-in {
  12. @r: 32;
  13. escaped: e("-Some::weird(#thing, y)");
  14. lighten: lighten(#ff0000, 40%);
  15. lighten-relative: lighten(#ff0000, 40%, relative);
  16. darken: darken(#ff0000, 40%);
  17. darken-relative: darken(#ff0000, 40%, relative);
  18. saturate: saturate(#29332f, 20%);
  19. saturate-relative: saturate(#29332f, 20%, relative);
  20. desaturate: desaturate(#203c31, 20%);
  21. desaturate-relative: desaturate(#203c31, 20%, relative);
  22. greyscale: greyscale(#203c31);
  23. hsl-clamp: hsl(380, 150%, 150%);
  24. spin-p: spin(hsl(340, 50%, 50%), 40);
  25. spin-n: spin(hsl(30, 50%, 50%), -40);
  26. luma-white: luma(#fff);
  27. luma-black: luma(#000);
  28. luma-black-alpha: luma(rgba(0,0,0,0.5));
  29. luma-red: luma(#ff0000);
  30. luma-green: luma(#00ff00);
  31. luma-blue: luma(#0000ff);
  32. luma-yellow: luma(#ffff00);
  33. luma-cyan: luma(#00ffff);
  34. luma-differs-from-luminance: luma(#ff3600);
  35. luminance-white: luma(#fff);
  36. luminance-black: luma(#000);
  37. luminance-black-alpha: luma(rgba(0,0,0,0.5));
  38. luminance-red: luma(#ff0000);
  39. luminance-differs-from-luma: luminance(#ff3600);
  40. contrast-filter: contrast(30%);
  41. saturate-filter: saturate(5%);
  42. contrast-white: contrast(#fff);
  43. contrast-black: contrast(#000);
  44. contrast-red: contrast(#ff0000);
  45. contrast-green: contrast(#00ff00);
  46. contrast-blue: contrast(#0000ff);
  47. contrast-yellow: contrast(#ffff00);
  48. contrast-cyan: contrast(#00ffff);
  49. contrast-light: contrast(#fff, #111111, #eeeeee);
  50. contrast-dark: contrast(#000, #111111, #eeeeee);
  51. contrast-wrongorder: contrast(#fff, #eeeeee, #111111, 0.5);
  52. contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5);
  53. contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5);
  54. contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6);
  55. contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.09);
  56. contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%);
  57. contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%);
  58. contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%);
  59. contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 9%);
  60. replace: replace("Hello, Mars.", "Mars\.", "World!");
  61. replace-captured: replace("This is a string.", "(string)\.$", "new $1.");
  62. replace-with-flags: replace("One + one = 4", "one", "2", "gi");
  63. replace-single-quoted: replace('foo-1', "1", "2");
  64. replace-escaped-string: replace(~"bar-1", "1", "2");
  65. replace-keyword: replace(baz-1, "1", "2");
  66. replace-with-color: replace("007", "0", #135, g);
  67. replace-with-number: replace("007", "0", 2em);
  68. format: %("rgb(%d, %d, %d)", @r, 128, 64);
  69. format-string: %("hello %s", "world");
  70. format-multiple: %("hello %s %d", "earth", 2);
  71. format-url-encode: %("red is %A", #ff0000);
  72. format-single-quoted: %('hello %s', "single world");
  73. format-escaped-string: %(~"hello %s", "escaped world");
  74. format-color-as-string: %("%s", #123);
  75. format-number-as-string: %("%s", 4px);
  76. eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
  77. unitless: unit(12px);
  78. unit: unit((13px + 1px), em);
  79. unitpercentage: unit(100, %);
  80. get-unit: get-unit(10px);
  81. get-unit-empty: get-unit(10);
  82. hue: hue(hsl(98, 12%, 95%));
  83. saturation: saturation(hsl(98, 12%, 95%));
  84. lightness: lightness(hsl(98, 12%, 95%));
  85. hsvhue: hsvhue(hsv(98, 12%, 95%));
  86. hsvsaturation: hsvsaturation(hsv(98, 12%, 95%));
  87. hsvvalue: hsvvalue(hsv(98, 12%, 95%));
  88. red: red(#f00);
  89. green: green(#0f0);
  90. blue: blue(#00f);
  91. rounded: round((@r/3));
  92. rounded-two: round((@r/3), 2);
  93. roundedpx: round((10px / 3));
  94. roundedpx-three: round((10px / 3), 3);
  95. rounded-percentage: round(10.2%);
  96. ceil: ceil(10.1px);
  97. floor: floor(12.9px);
  98. sqrt: sqrt(25px);
  99. pi: pi();
  100. mod: mod(13m, 11cm); // could take into account units, doesn't at the moment
  101. abs: abs(-4%);
  102. tan: tan(42deg);
  103. sin: sin(10deg);
  104. cos: cos(12);
  105. atan: atan(tan(0.1rad));
  106. atan: convert(acos(cos(34deg)), deg);
  107. atan: convert(acos(cos(50grad)), deg);
  108. pow: pow(8px, 2);
  109. pow: pow(4, 3);
  110. pow: pow(3, 3em);
  111. min: min(0);
  112. min: min(6, 5);
  113. min: min(1pt, 3pt);
  114. min: min(1cm, 3mm);
  115. max: max(1, 3);
  116. max: max(3em, 1em, 2em, 5em);
  117. percentage: percentage((10px / 50));
  118. color-quoted-digit: color("#dda0dd");
  119. color-quoted-keyword: color("plum");
  120. color-color: color(#dda0dd);
  121. color-keyword: color(plum);
  122. tint: tint(#777777, 13);
  123. tint-full: tint(#777777, 100);
  124. tint-percent: tint(#777777, 13%);
  125. tint-negative: tint(#777777, -13%);
  126. shade: shade(#777777, 13);
  127. shade-full: shade(#777777, 100);
  128. shade-percent: shade(#777777, 13%);
  129. shade-negative: shade(#777777, -13%);
  130. fade-out: fadeout(red, 5%); // support fadeOut and fadeout
  131. fade-in: fadein(fadeout(red, 10%), 5%);
  132. fade-out-relative: fadeout(red, 5%,relative);
  133. fade-in-relative: fadein(fadeout(red, 10%, relative), 5%, relative);
  134. fade-out2: fadeout(fadeout(red, 50%), 50%);
  135. fade-out2-relative: fadeout(fadeout(red, 50%, relative), 50%, relative);
  136. hsv: hsv(5, 50%, 30%);
  137. hsva: hsva(3, 50%, 30%, 0.2);
  138. mix: mix(#ff0000, #ffff00, 80);
  139. mix-0: mix(#ff0000, #ffff00, 0);
  140. mix-100: mix(#ff0000, #ffff00, 100);
  141. mix-weightless: mix(#ff0000, #ffff00);
  142. mixt: mix(#ff0000, transparent);
  143. .is-a {
  144. @rules: {
  145. color: red;
  146. };
  147. ruleset: isruleset(@rules);
  148. color: iscolor(#ddd);
  149. color1: iscolor(red);
  150. color2: iscolor(rgb(0, 0, 0));
  151. color3: iscolor(transparent);
  152. keyword: iskeyword(hello);
  153. number: isnumber(32);
  154. string: isstring("hello");
  155. pixel: ispixel(32px);
  156. percent: ispercentage(32%);
  157. em: isem(32em);
  158. ex: isunit(32ex, ex);
  159. rem: isunit(32rem, rem);
  160. vw: isunit(32vw, vw);
  161. vh: isunit(32vh, vh);
  162. vmin: isunit(32vmin, vmin);
  163. vmax: isunit(32vmax, vmax);
  164. ch: isunit(32ch, ch);
  165. cm: isunit(32cm, cm);
  166. mm: isunit(32mm, mm);
  167. pt: isunit(32pt, pt);
  168. q: isunit(32q, q);
  169. in: isunit(32in, in);
  170. cat: isunit(32cat, cat);
  171. no-unit-is-empty: isunit(32, '');
  172. case-insensitive-1: isunit(32CAT, cat);
  173. case-insensitive-2: isunit(32px, PX);
  174. }
  175. }
  176. #alpha {
  177. alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
  178. alpha2: alpha(rgba(3, 4, 5, 0.5));
  179. alpha3: alpha(transparent);
  180. }
  181. #blendmodes {
  182. multiply: multiply(#f60000, #f60000);
  183. screen: screen(#f60000, #0000f6);
  184. overlay: overlay(#f60000, #0000f6);
  185. softlight: softlight(#f60000, #ffffff);
  186. hardlight: hardlight(#f60000, #0000f6);
  187. difference: difference(#f60000, #0000f6);
  188. exclusion: exclusion(#f60000, #0000f6);
  189. average: average(#f60000, #0000f6);
  190. negation: negation(#f60000, #313131);
  191. }
  192. #extract-and-length {
  193. @anon: A B C 1 2 3;
  194. extract: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1);
  195. length: length(@anon);
  196. }
  197. #quoted-functions-in-mixin {
  198. // Quoted type may have some weird side-effects when used in mixins (#2308)
  199. .mixin();
  200. .mixin() {
  201. replace-double-quoted: replace('foo-1', "1", "2");
  202. replace-single-quoted: replace('foo-3', "3", "4");
  203. replace-escaped-string: replace(~"bar-1", "1", "2");
  204. replace-keyword: replace(baz-1, "1", "2");
  205. replace-anonymous: replace(e("qux-1"), "1", "2");
  206. format-double-quoted: %("hello %s", "world");
  207. format-single-quoted: %('hello %s', "single world");
  208. format-escaped-string: %(~"hello %s", "escaped world");
  209. format-keyword: %(hello);
  210. format-anonymous: %(e("hello %s"), "anonymous world");
  211. }
  212. }
  213. #list-details {
  214. @list:
  215. a 1, // Some comment
  216. b 2;
  217. length: length(@list);
  218. one: extract(@list, 1);
  219. @two: extract(@list, 2);
  220. two: @two;
  221. two-length: length(@two);
  222. two-one: extract(@two, 1);
  223. two-two: extract(@two, 2);
  224. }
  225. @color1: #FFF;/* comment1 */
  226. @color2: #FFF/* comment2 */;
  227. html {
  228. color: mix(blue, @color1, 50%);
  229. color: mix(blue, @color2, 50%);
  230. }
  231. #boolean {
  232. a: boolean(not(2 < 1));
  233. b: boolean(not(2 > 1) and (true));
  234. c: boolean(not(boolean(true)));
  235. }
  236. #if {
  237. a: if(not(false), 1, 2);
  238. b: if(not(true), 1, 2);
  239. @1: if(not(false), {c: 3}, {d: 4}); @1();
  240. e: if(not(true), 5);
  241. @f: boolean(3 = 4);
  242. f: if(not(@f), 6);
  243. g: if(true, 3, 5);
  244. h: if(false, 3, 5);
  245. i: if(true and isnumber(6), 6, 8);
  246. j: if(not(true) and true, 6, 8);
  247. k: if(true or true, 1);
  248. if((false), {g: 7}); /* results in void */
  249. @conditional: if((true), {
  250. color: green;
  251. }, {});
  252. @conditional();
  253. @falsey: if((false), {
  254. color: orange;
  255. }, {
  256. color: purple;
  257. });
  258. @falsey();
  259. }