Map Functions

keywords($args) //=> map 

Returns the keywords passed to a mixin or function that takes arbitrary arguments. The $args argument must be an argument list.

The keywords are returned as a map from argument names as unquoted strings (not including $) to the values of those arguments.

SCSS Syntax

@mixin syntax-colors($args...) {
  @debug keywords($args); // (string: #080, comment: #800, $variable: $60b)

  @each $name, $color in keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

Sass Syntax

@mixin syntax-colors($args...)
  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)

  @each $name, $color in keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b);




CSS Output

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}




map-get($map, $key) 

Returns the value in $map associated with $key.

If $map doesn’t have a value associated with $key, returns null.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-get($font-weights, "medium"); // 500
@debug map-get($font-weights, "extra-bold"); // null

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map-get($font-weights, "medium")  // 500
@debug map-get($font-weights, "extra-bold")  // null
map-has-key($map, $key) //=> boolean 

Returns whether $map contains a value associated with $key.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-has-key($font-weights, "regular"); // true
@debug map-has-key($font-weights, "bolder"); // false

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map-has-key($font-weights, "regular")  // true
@debug map-has-key($font-weights, "bolder")  // false
map-keys($map) //=> list 

Returns a comma-separated list of all the keys in $map.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-keys($font-weights); // "regular", "medium", "bold"

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map-keys($font-weights)  // "regular", "medium", "bold"
map-merge($map1, $map2) //=> map 

Returns a new map with all the keys and values from both $map1 and $map2.

This can also be used to add a new value or overrwrite a value in $map1, by passing a single key/value pair as $map2.

If both $map1 and $map2 have the same key, $map2’s value takes precedence.

All keys in the returned map that also appear in $map1 have the same order as in $map1. New keys from $map2 appear at the end of the map.

SCSS Syntax

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map-merge($light-weights, $heavy-weights);
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

// map-merge() can be used to add a single key/value pair to a map.
@debug map-merge($light-weights, ("lighter": 200));
// ("lightest": 100, "light": 300, "lighter": 200)

// It can also be used to overwrite a value in a map.
@debug map-merge($light-weights, ("light": 200));
// ("lightest": 100, "light": 200)

Sass Syntax

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map-merge($light-weights, $heavy-weights)
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

// map-merge() can be used to add a single key/value pair to a map.
@debug map-merge($light-weights, ("lighter": 200))
// ("lightest": 100, "light": 300, "lighter": 200)

// It can also be used to overwrite a value in a map.
@debug map-merge($light-weights, ("light": 200))
// ("lightest": 100, "light": 200)
map-remove($map, $keys...) //=> map 

Returns a copy of $map without any values associated with $keys.

If a key in $keys doesn’t have an associated value in $map, it’s ignored.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map-remove($font-weights, "regular", "bold"); // ("medium": 500)
@debug map-remove($font-weights, "bolder");
// ("regular": 400, "medium": 500, "bold": 700)

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map-remove($font-weights, "regular")  // ("medium": 500, "bold": 700)
@debug map-remove($font-weights, "regular", "bold")  // ("medium": 500)
@debug map-remove($font-weights, "bolder")
// ("regular": 400, "medium": 500, "bold": 700)
map-values($map) //=> list 

Returns a comma-separated list of all the values in $map.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-values($font-weights); // 400, 500, 700

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map-values($font-weights)  // 400, 500, 700