#functions { @var: 10; @colors: #000, #fff; color: _color("evil red"); // #660000 width: increment(15); height: undefined("self"); border-width: add(2, 3); variable: increment(@var); background: linear-gradient(@colors); } #built-in { @r: 32; escaped: e("-Some::weird(#thing, y)"); lighten: lighten(#ff0000, 40%); darken: darken(#ff0000, 40%); saturate: saturate(#29332f, 20%); desaturate: desaturate(#203c31, 20%); greyscale: greyscale(#203c31); hsl-clamp: hsl(380, 150%, 150%); spin-p: spin(hsl(340, 50%, 50%), 40); spin-n: spin(hsl(30, 50%, 50%), -40); luma-white: luma(#fff); luma-black: luma(#000); luma-black-alpha: luma(rgba(0,0,0,0.5)); luma-red: luma(#ff0000); luma-green: luma(#00ff00); luma-blue: luma(#0000ff); luma-yellow: luma(#ffff00); luma-cyan: luma(#00ffff); luma-white-alpha: luma(rgba(255,255,255,0.5)); contrast-filter: contrast(30%); saturate-filter: saturate(5%); contrast-white: contrast(#fff); contrast-black: contrast(#000); contrast-red: contrast(#ff0000); contrast-green: contrast(#00ff00); contrast-blue: contrast(#0000ff); contrast-yellow: contrast(#ffff00); contrast-cyan: contrast(#00ffff); contrast-light: contrast(#fff, #111111, #eeeeee); contrast-dark: contrast(#000, #111111, #eeeeee); contrast-wrongorder: contrast(#fff, #eeeeee, #111111, 0.5); contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5); contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5); contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6); contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.1); contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%); contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%); contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%); contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 10%); format: %("rgb(%d, %d, %d)", @r, 128, 64); format-string: %("hello %s", "world"); format-multiple: %("hello %s %d", "earth", 2); format-url-encode: %('red is %A', #ff0000); eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64)); unitless: unit(12px); unit: unit((13px + 1px), em); hue: hue(hsl(98, 12%, 95%)); saturation: saturation(hsl(98, 12%, 95%)); lightness: lightness(hsl(98, 12%, 95%)); hsvhue: hsvhue(hsv(98, 12%, 95%)); hsvsaturation: hsvsaturation(hsv(98, 12%, 95%)); hsvvalue: hsvvalue(hsv(98, 12%, 95%)); red: red(#f00); green: green(#0f0); blue: blue(#00f); rounded: round((@r/3)); rounded-two: round((@r/3), 2); roundedpx: round((10px / 3)); roundedpx-three: round((10px / 3), 3); rounded-percentage: round(10.2%); ceil: ceil(10.1px); floor: floor(12.9px); sqrt: sqrt(25px); pi: pi(); mod: mod(13m, 11cm); // could take into account units, doesn't at the moment abs: abs(-4%); tan: tan(42deg); sin: sin(10deg); cos: cos(12); atan: atan(tan(0.1rad)); atan: convert(acos(cos(34deg)), deg); atan: convert(acos(cos(50grad)), deg); pow: pow(8px, 2); pow: pow(4, 3); pow: pow(3, 3em); min: min(0); min: min("junk", 6, 5); min: min(1pc, 3pt); max: max(1, 3); max: max(3%, 1cm, 8%, 2mm); percentage: percentage((10px / 50)); color: color("#ff0011"); tint: tint(#777777, 13); tint-full: tint(#777777, 100); tint-percent: tint(#777777, 13%); shade: shade(#777777, 13); shade-full: shade(#777777, 100); shade-percent: shade(#777777, 13%); fade-out: fadeOut(red, 5%); // support fadeOut and fadeout fade-in: fadein(fadeout(red, 10%), 5%); hsv: hsv(5, 50%, 30%); hsva: hsva(3, 50%, 30%, 0.2); mix: mix(#ff0000, #ffff00, 80); mix-0: mix(#ff0000, #ffff00, 0); mix-100: mix(#ff0000, #ffff00, 100); mix-weightless: mix(#ff0000, #ffff00); mixt: mix(#ff0000, transparent); .is-a { color: iscolor(#ddd); color1: iscolor(red); color2: iscolor(rgb(0, 0, 0)); color3: iscolor(transparent); keyword: iskeyword(hello); number: isnumber(32); string: isstring("hello"); pixel: ispixel(32px); percent: ispercentage(32%); em: isem(32em); cat: isunit(32cat, cat); } } #alpha { alpha: darken(hsla(25, 50%, 50%, 0.6), 10%); alpha2: alpha(rgba(3, 4, 5, 0.5)); alpha3: alpha(transparent); } #blendmodes { multiply: multiply(#f60000, #f60000); screen: screen(#f60000, #0000f6); overlay: overlay(#f60000, #0000f6); softlight: softlight(#f60000, #ffffff); hardlight: hardlight(#f60000, #0000f6); difference: difference(#f60000, #0000f6); exclusion: exclusion(#f60000, #0000f6); average: average(#f60000, #0000f6); negation: negation(#f60000, #313131); } #extract-and-length { @anon: A B C 1 2 3; extract: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1); length: length(@anon); }