functions.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. #functions {
  2. color: #660000;
  3. width: 16;
  4. height: undefined("self");
  5. border-width: 5;
  6. variable: 11;
  7. background: linear-gradient(#000, #fff);
  8. }
  9. #built-in {
  10. escaped: -Some::weird(#thing, y);
  11. lighten: #ffcccc;
  12. lighten-relative: #ff6666;
  13. darken: #330000;
  14. darken-relative: #990000;
  15. saturate: #203c31;
  16. saturate-relative: #28342f;
  17. desaturate: #29332f;
  18. desaturate-relative: #233930;
  19. greyscale: #2e2e2e;
  20. hsl-clamp: hsl(0, 0%, 100%);
  21. spin-p: hsl(20, 50%, 50%);
  22. spin-n: hsl(350, 50%, 50%);
  23. luma-white: 100%;
  24. luma-black: 0%;
  25. luma-black-alpha: 0%;
  26. luma-red: 21.26%;
  27. luma-green: 71.52%;
  28. luma-blue: 7.22%;
  29. luma-yellow: 92.78%;
  30. luma-cyan: 78.74%;
  31. luma-differs-from-luminance: 23.89833349%;
  32. luminance-white: 100%;
  33. luminance-black: 0%;
  34. luminance-black-alpha: 0%;
  35. luminance-red: 21.26%;
  36. luminance-differs-from-luma: 36.40541176%;
  37. contrast-filter: contrast(30%);
  38. saturate-filter: saturate(5%);
  39. contrast-white: #000000;
  40. contrast-black: #ffffff;
  41. contrast-red: #ffffff;
  42. contrast-green: #000000;
  43. contrast-blue: #ffffff;
  44. contrast-yellow: #000000;
  45. contrast-cyan: #000000;
  46. contrast-light: #111111;
  47. contrast-dark: #eeeeee;
  48. contrast-wrongorder: #111111;
  49. contrast-light-thresh: #111111;
  50. contrast-dark-thresh: #eeeeee;
  51. contrast-high-thresh: #eeeeee;
  52. contrast-low-thresh: #111111;
  53. contrast-light-thresh-per: #111111;
  54. contrast-dark-thresh-per: #eeeeee;
  55. contrast-high-thresh-per: #eeeeee;
  56. contrast-low-thresh-per: #111111;
  57. replace: "Hello, World!";
  58. replace-captured: "This is a new string.";
  59. replace-with-flags: "2 + 2 = 4";
  60. replace-single-quoted: 'foo-2';
  61. replace-escaped-string: bar-2;
  62. replace-keyword: baz-2;
  63. replace-with-color: "#135#1357";
  64. replace-with-number: "2em07";
  65. format: "rgb(32, 128, 64)";
  66. format-string: "hello world";
  67. format-multiple: "hello earth 2";
  68. format-url-encode: "red is %23ff0000";
  69. format-single-quoted: 'hello single world';
  70. format-escaped-string: hello escaped world;
  71. format-color-as-string: "#123";
  72. format-number-as-string: "4px";
  73. eformat: rgb(32, 128, 64);
  74. unitless: 12;
  75. unit: 14em;
  76. unitpercentage: 100%;
  77. get-unit: px;
  78. get-unit-empty: ;
  79. hue: 98;
  80. saturation: 12%;
  81. lightness: 95%;
  82. hsvhue: 98;
  83. hsvsaturation: 12%;
  84. hsvvalue: 95%;
  85. red: 255;
  86. green: 255;
  87. blue: 255;
  88. rounded: 11;
  89. rounded-two: 10.67;
  90. roundedpx: 3px;
  91. roundedpx-three: 3.333px;
  92. rounded-percentage: 10%;
  93. ceil: 11px;
  94. floor: 12px;
  95. sqrt: 5px;
  96. pi: 3.14159265;
  97. mod: 2m;
  98. abs: 4%;
  99. tan: 0.90040404;
  100. sin: 0.17364818;
  101. cos: 0.84385396;
  102. atan: 0.1rad;
  103. atan: 34deg;
  104. atan: 45deg;
  105. pow: 64px;
  106. pow: 64;
  107. pow: 27;
  108. min: 0;
  109. min: 5;
  110. min: 1pt;
  111. min: 3mm;
  112. max: 3;
  113. max: 5em;
  114. percentage: 20%;
  115. color-quoted-digit: #dda0dd;
  116. color-quoted-keyword: #dda0dd;
  117. color-color: #dda0dd;
  118. color-keyword: #dda0dd;
  119. tint: #898989;
  120. tint-full: #ffffff;
  121. tint-percent: #898989;
  122. tint-negative: #656565;
  123. shade: #686868;
  124. shade-full: #000000;
  125. shade-percent: #686868;
  126. shade-negative: #868686;
  127. fade-out: rgba(255, 0, 0, 0.95);
  128. fade-in: rgba(255, 0, 0, 0.95);
  129. fade-out-relative: rgba(255, 0, 0, 0.95);
  130. fade-in-relative: rgba(255, 0, 0, 0.945);
  131. fade-out2: rgba(255, 0, 0, 0);
  132. fade-out2-relative: rgba(255, 0, 0, 0.25);
  133. hsv: #4d2926;
  134. hsva: rgba(77, 40, 38, 0.2);
  135. mix: #ff3300;
  136. mix-0: #ffff00;
  137. mix-100: #ff0000;
  138. mix-weightless: #ff8000;
  139. mixt: rgba(255, 0, 0, 0.5);
  140. }
  141. #built-in .is-a {
  142. ruleset: true;
  143. color: true;
  144. color1: true;
  145. color2: true;
  146. color3: true;
  147. keyword: true;
  148. number: true;
  149. string: true;
  150. pixel: true;
  151. percent: true;
  152. em: true;
  153. ex: true;
  154. rem: true;
  155. vw: true;
  156. vh: true;
  157. vmin: true;
  158. vmax: true;
  159. ch: true;
  160. cm: true;
  161. mm: true;
  162. pt: true;
  163. q: true;
  164. in: true;
  165. cat: true;
  166. no-unit-is-empty: true;
  167. case-insensitive-1: true;
  168. case-insensitive-2: true;
  169. }
  170. #alpha {
  171. alpha: hsla(25, 50%, 40%, 0.6);
  172. alpha2: 0.5;
  173. alpha3: 0;
  174. }
  175. #blendmodes {
  176. multiply: #ed0000;
  177. screen: #f600f6;
  178. overlay: #ed0000;
  179. softlight: #fa0000;
  180. hardlight: #0000ed;
  181. difference: #f600f6;
  182. exclusion: #f600f6;
  183. average: #7b007b;
  184. negation: #d73131;
  185. }
  186. #extract-and-length {
  187. extract: 3 2 1 C B A;
  188. length: 6;
  189. }
  190. #quoted-functions-in-mixin {
  191. replace-double-quoted: 'foo-2';
  192. replace-single-quoted: 'foo-4';
  193. replace-escaped-string: bar-2;
  194. replace-keyword: baz-2;
  195. replace-anonymous: qux-2;
  196. format-double-quoted: "hello world";
  197. format-single-quoted: 'hello single world';
  198. format-escaped-string: hello escaped world;
  199. format-keyword: hello;
  200. format-anonymous: hello anonymous world;
  201. }
  202. #list-details {
  203. length: 2;
  204. one: a 1;
  205. two: b 2;
  206. two-length: 2;
  207. two-one: b;
  208. two-two: 2;
  209. }
  210. /* comment1 */
  211. html {
  212. color: #8080ff;
  213. }
  214. #boolean {
  215. a: true;
  216. b: false;
  217. c: false;
  218. }
  219. #if {
  220. a: 1;
  221. b: 2;
  222. c: 3;
  223. e: ;
  224. f: 6;
  225. g: 3;
  226. h: 5;
  227. i: 6;
  228. j: 8;
  229. k: 1;
  230. /* results in void */
  231. color: green;
  232. color: purple;
  233. }