Sass map-keys() Function

Posted in Sass Tutorial

Updated on Aug 25, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The map-keys() function in Sass is an essential tool for working with maps. Maps in Sass are collections of key-value pairs, similar to associative arrays in other programming languages.

The map-keys() function allows you to extract all the keys from a given map, making it easier to iterate over them or perform other operations.

💡 Syntax

The syntax for the map-keys() function is simple:

Syntax

Copied

map-keys($map)

🔢 Parameters

$map: The input map containing key-value pairs from which you wish to extract the keys.

↩️ Return Value

The function returns a list of all the keys in the provided map. If the map is empty, it returns an empty list.

📝 Example Usage

Let’s explore some examples to understand how map-keys() can be used effectively in Sass.

📜 Example 1: Basic Usage

example.scss

Copied

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  accent: #0000ff,
);

$color-keys: map-keys($colors);

body {
  @each $key in $color-keys {
    .#{$key} {
      color: map-get($colors, $key);
    }
  }
}

In this example, the map-keys() function extracts the keys from the $colors map (primary, secondary, accent). The @each loop then creates classes for each color key with the corresponding color value.

📜 Example 2: Using Map Keys in Functions

example.scss

Copied

$breakpoints: (
  small: 600px,
  medium: 900px,
  large: 1200px,
);

@mixin respond-to($size) {
  @if map-has-key($breakpoints, $size) {
    @media (min-width: map-get($breakpoints, $size)) {
      @content;
    }
  }
}

$breakpoint-keys: map-keys($breakpoints);

@each $key in $breakpoint-keys {
  .container-#{$key} {
    @include respond-to($key) {
      width: 100%;
    }
  }
}

In this example, map-keys() is used to extract breakpoint keys (small, medium, large) from the $breakpoints map. The mixin respond-to() then applies media queries based on these keys.

📜 Example 3: Iterating Over Nested Maps

example.scss

Copied

$theme: (
  colors: (
    background: #ffffff,
    text: #333333,
  ),
  fonts: (
    primary: 'Arial, sans-serif',
    secondary: 'Georgia, serif',
  ),
);

@each $category, $map in $theme {
  @each $key in map-keys($map) {
    .#{$category}-#{$key} {
      // Custom styles based on the key
    }
  }
}

This example demonstrates how to iterate over keys within nested maps. The map-keys() function is used to extract keys from maps within the $theme map, allowing for the creation of class names like .colors-background, .fonts-primary, etc.

🎉 Conclusion

The map-keys() function is a valuable asset when working with maps in Sass. It allows you to easily retrieve all keys from a map, enabling more dynamic and flexible stylesheets. Whether you're building a complex theming system, generating utility classes, or managing responsive design breakpoints, map-keys() simplifies the process of working with maps.

Understanding how to leverage map-keys() will enhance your ability to create modular and maintainable styles in Sass, making your CSS code more efficient and adaptable to changes.