@include set(baseline, 1rem);
 
.element {
  margin-bottom: bl(2); // 2rem
}

.element {
  font-size: em(20); // 1.25em
}

$number: 10px;
$number: negative($number); // -10px;

$list: (1, -2rem, 30px);
$list: negative($list);     // (-1, -2rem, -30px);

$map: (
  a: 1,
  b: (1, -2rem, 30px)
);
$map: negative($map);       // ( a: -1, b: (-1, -2rem, -30px) );

.element {
  font-size: rem(32); // 2rem
}

$string: 'Beetle';
$string: str-replace($string, 'e');      // Btl

$string: 'Beetle';
$string: str-replace($string, 'e', '3'); // B33tl3

$number: 10px;
$number: strip-units(10px); // 10

@include set( breakpoints, (
  small  : 600px,
  medium : 1024px,
  large  : 1300px,
  huge   : 1600px
) );

@debug get-keys(breakpoints); // ( small, medium, large, huge )

@include set( breakpoints, (
  small  : 600px,
  medium : 1024px,
  large  : 1300px,
  huge   : 1600px
) );

@debug get(breakpoints);
// (
//     small  : 600px,
//     medium : 1024px,
//     large  : 1300px,
//     huge   : 1600px
// )

@debug get(breakpoints, small); // 600px

@include set( palettes, (
  grey: (
    light : #EEEEEE,
    null  : #D0D0D0,
    dark  : #404040
  ), ...
) );

.element {
  background-color: palette(light grey); // #EEEEEE
  color: palette(dark grey);             // #404040

  &:hover {
    color: palette(grey); // palette(null grey) => #D0D0D0
  }
}

$colors: (
  blue:  #0000ff,
  red:   #ff0000,
  green: #00ff00,
  brand: #0000ff
);

@debug dedupe($colors);
// (
//    blue:  #0000ff,
//    red:   #ff0000,
//    green: #00ff00
// );

body {
    background-color: random-color();
}

$map: (
    0:   0,
    one: 1,
    tw0: two
);

@each $key, $val in $map {
    @debug type-of($key);
}

// DEBUG: number
// DEBUG: string
// DEBUG: string

$stringified-map: stringify-keys($map);

@each $key, $val in $stringified-map {
    @debug type-of($key);
}

// DEBUG: string
// DEBUG: string
// DEBUG: string

@include query( small ) {
    body {
        background-color: grey;
    }
}

@include query( below medium ) {
    .navigation {
        display: none;
    }
}

@include query( medium to huge ) {
    .page-title {
        font-size: 3rem;
    }
}

// The above code compiles to the following CSS:

@media (min-width: 600px) {
    body {
        background-color: grey
    }
}
@media (max-width: 1024px) {
    .navigation {
        display: none
    }
}
@media all and (min-width: 1024px) and (max-width: 1600px) {
    .page-title {
        font-size: 3rem
    }
}

.button {
    @include responsive(( padding-left, padding-right ), (
        base:   14px,
        medium: 18px,
        large:  22px
    ));
}

// The above code will output:

.button {
    padding-left: 14px;
    padding-right: 14px;
}

// 'medium' breakpoint
@media (min-width: 1024px) {
    .button {
        padding-left: 18px;
        padding-right: 18px;
    }
}

// 'large' breakpoint
@media (min-width: 1300px) {
    .button {
        padding-left: 22px;
        padding-right: 22px;
    }
}

@include set-default( baseline, 1rem );
@debug get(baseline) // 1rem

@include set( baseline, 1.25rem );
@debug get(baseline) // 1.25rem

// This will not work, since a value already exists
@include set-default( baseline, 1rem ); 
@debug get(baseline) // 1.25rem

@include set( baseline, 1.25rem );

@debug get(baseline); // 1.25rem

@include set( breakpoints, (
    small  : 600px,
    medium : 1024px,
    large  : 1300px,
    huge   : 1600px
 ) );

@debug get(breakpoints);
// (
//     small  : 600px,
//     medium : 1024px,
//     large  : 1300px,
//     huge   : 1600px
// )

@debug get(breakpoints, small); // 600px