#color {
    color: rgb(34,234,24);

    red: red(rgb(34,234,24));
    green: green(rgb(34,234,24));
    blue: blue(rgb(34,234,24));

    color: rgba(1,2,4, 0.5);
    a1: alpha(rgb(1,2,4));
    a2: alpha(rgba(1,2,4, 0.5));

    mix: mix(rgb(1,2,3), rgb(3,4,5));

    rgba: rgba($color: #a7c, $alpha: 0.4);
    rgba: rgba(#a7c, 0.4);

    green: green(ForestGreen);
}

#hsl {
    color: hsl(100, 50, 55);
    color: hsla(100, 50, 55, 0.5);

    hue: hue(hsl(100, 50, 55));
    sat: saturation(hsl(100, 50, 55));
    lig: lightness(hsl(100, 50, 55));
}

#more-color {
    $color: hsl(-80,44,33);

    light: lighten($color, 10%);
    dark: darken($color, 10%);

    sat: saturate($color, 10%);
    desat: desaturate($color, 10%);

    gray: grayscale($color);
    comp: complement($color);
    inv: invert($color);
}

#more-more-color {
    $color: rgba(1,2,3,0.5);
    op: opacity($color);

    opacify: opacify($color, 0.1);
    opacify: fade-in($color, 0.1);

    transparentize: transparentize($color, 0.1);
    transparentize: fade-out($color, 0.1);
    transparentize: transparentize(#348203, 0.1);
}

#more-more-more-color {
    $color: rgba(10,10,10,0);
    color: adjust-color($color, $blue: 69, $red: 55, $green: 100, $alpha: 0.4);
    color: adjust-color($color, $hue: 170, $saturation: 100, $lightness: 50);

    color: change-color($color, $blue: 69, $red: 55, $green: 100, $alpha: 0.4);
    color: change-color($color, $hue: 170, $saturation: 100, $lightness: 50);

    color: scale-color($color, $red: 55%);
    color: scale-color($color, $red: -55%);

    color: scale-color($color, $lightness: 55%);
    color: scale-color($color, $lightness: -55%);

    color: ie-hex-str($color);
    color: ie-hex-str(#abc);
}

#string {
    color: unquote("hello what is going on");
    // color: quote(yeah you know it); // **
    color: quote(yeah);
    color: quote("I do?");
    color: str_index(abc, b);
    color: str_insert(string, insert, 2);
    color: str_insert(string, "\\", 2);
    color: str_length(string);
    color: str_slice(string, 2, 4);
    color: str-slice(string, 2, 0);
    color: str-slice(string, 2, -2);
    color: to_lower_case('StRiNg');
    color: to_upper_case(StRiNg);
    color: str-slice(string, 0);
    color: str-slice(string, 1);
    color: str-slice(string, 2);
    color: str-slice(string, 3);
    color: str-slice(string, 4);
    color: str-slice(string, 5);
    color: str-slice(string, -1);
    color: str-slice(string, -2);
    color: str-slice(string, -3);
    color: str-slice(string, -4);
    color: str-slice(string, -5);
    color: str-slice(string, 1, 0);
    color: str-slice(string, 1, 1);
    color: str-slice(string, 1, 2);
    color: str-slice(string, 1, -1);
    color: str-slice(string, 1, -2);
}

#number {
    color: percentage(100/40);
    $test: 50%; $test: 0 + ($test / 100%); color: percentage($test);
    color: round(3.4);
    color: floor(3.4);
    color: ceil(3.4);

    top: floor(10.4px);
    top: ceil(.4ex);
    width: percentage(100px / 50px);
    bottom: abs(-10px);
    padding: min(5em, 3em, 4em,) max(2px, 1in,) min(1in, 96px,) max(1in, 72pt,);
}

#list {
    len: length(hello world what);
    len: length(thing);

    n: nth(hello world what, 1);
    // n: nth(hello world what, 100); // **

    hello: join(one two three, hello, comma);
    hello: join(one two three, hello world what is going, comma);
    hello: append(one two three, hello, comma);

    index: index(1px solid red, solid);
    index: index(1px solid red, dashed);
    index: index(1px solid red, #f00);
    index: index(96px solid red, 1in);
    index: index((1in 2) a b, 1in);
    index: index((1in 2) a b, (96px 2));
    index: index((1in 2) a b, (1in, 2));
    index: index((1px solid red), solid);
    index: index(1px 3px + 3px, 4+2px);
    $var: oo;
    index: index(foo bar, f#{$var});
    display: index(nest, nest);

    $yes: one, two, three;
    $no: great job;
    world: join($yes, $no);
    world: append($yes, $no);

    cool: join($yes, $no, space);
    cool: join($no, $yes);

    zip: zip((1px, 2px), (solid dashed));
    zip: zip(1px 2px 3px, solid dashed, red green blue);
}

#introspection {
    t: type-of(100px);
    t: type-of(asdf);
    t: type-of("asdf");
    t: type-of(true);
    t: type-of(#fff);
    t: type-of(blue);
    t: type-of(one two three);

    u: unit(12);
    u: unit(12px);
    u: unit(12em);

    l: unitless(23);
    l: unitless(23deg);

    c: comparable(2px, 1px);
    c: comparable(100px, 3em);
    c: comparable(10cm, 3mm);
    c: comparable(1, 4);
    c: comparable(1ex, 4em);
    c: comparable(2em, 5em);
}

#if {
    color: if(true, yes, no);
    color: if(false, yes, no);
    color: if(false or true, yes, no);
    color: if(10px, yes, no);
}

.transparent {
  r: red(transparent);
  g: green(transparent);
  b: blue(transparent);
  a: alpha(transparent);
}

.alpha {
  a: alpha(black);
  a: alpha(#fff);
  a: alpha(rgb(0, 0, 0));
  a: alpha(rgba(0, 0, 0, 0.5));
}

$a-false-value: false;
#exists {
  a: variable-exists(a-false-value);
  b: variable-exists('a-false-value');
  c: variable-exists(nonexistent);
}

$fn: nth;
div.call-tests {
  a: call(rgb, 10, 100, 255);
  b: call(scale-color, #0a64ff, $lightness: -10%);
  c: call($fn, (a b c), 2);
}

$type: text;
div.unquote-test {
  a: unquote('[type=\'#{$type}\']');
}

.does-compile-1 {
  color: call(lighten, #000, 40%);
}

.does-compile-2 {
  $color: #000;
  $percent: 40%;
  color: call(lighten, $color, $percent);
}

.does-compile-3 {
  $args: (#000, 40%);
  color: call(lighten, nth($args, 1), nth($args, 2));
}

.does-compile-4 {
  $args: (#000, 40%);
  color: call(lighten, $args...);
}

.join-list-with-or-without-interpolation {
    $list:();
    $one: (value1 value2);
    $two: (value3 value4);
    $list: join($list, #{$one}, comma);
    $list: join($list, #{$two}, comma);

    transition: $list;
    transition: join(#{$one}, #{$two}, comma);
    transition: join($one, #{$two}, comma);
    transition: join(#{$one}, $two, comma);
    transition: join($one, $two, comma);
    transition: join((value1 value2), (value3 value4), comma);
}

.list-zip-types {
  zip: zip(2px, (solid dashed));
  zip: zip(3px, "bold", blue);
}