Sass map-has-key() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The map-has-key() function in Sass is an essential tool for working with maps (associative arrays). It allows you to check whether a specific key exists in a given map.

This function is especially useful when you're dynamically managing styles or configurations and need to verify the presence of certain keys in your map before proceeding with operations.

💡 Syntax

The syntax for map-has-key() is simple and intuitive. It requires two arguments:

Syntax

Copied

map-has-key(map, key)

🔢 Parameters

map: The map to be searched.
key: The key you want to check for in the map.

↩️ Return Value

The function returns a Boolean value:

true: If the key exists in the map.
false: If the key does not exist in the map.

📝 Example Usage

Let's explore some examples to understand how map-has-key() can be applied in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  accent: #e74c3c
);

$has-accent: map-has-key($colors, accent); // true
$has-warning: map-has-key($colors, warning); // false

body {
  background-color: if($has-accent, map-get($colors, accent), #ffffff);
}

In this example, the map-has-key() function checks if the accent and warning keys exist in the $colors map. The background color of the body is set based on whether the accent key is found.

📜 Example 2: Conditional Styling

example.scss

Copied

$font-sizes: (
  small: 12px,
  medium: 16px,
  large: 24px
);

@mixin font-size($size) {
  @if map-has-key($font-sizes, $size) {
    font-size: map-get($font-sizes, $size);
  } @else {
    font-size: 14px; // Default font size
  }
}

p {
  @include font-size(medium);
}

Here, a mixin uses map-has-key() to check if a given size exists in the $font-sizes map. If the size is found, it's applied; otherwise, a default font size is used.

📜 Example 3: Error Handling

example.scss

Copied

$theme: (
  colors: (
    primary: #ff6347,
    secondary: #4682b4
  ),
  fonts: (
    base: 'Arial, sans-serif',
    heading: 'Georgia, serif'
  )
);

@function get-theme-value($map, $key) {
  @if map-has-key($map, $key) {
    @return map-get($map, $key);
  } @else {
    @error "Key `#{$key}` not found in the map.";
  }
}

$primary-color: get-theme-value(map-get($theme, colors), primary); // #ff6347
$non-existent-color: get-theme-value(map-get($theme, colors), tertiary); // Error

In this example, map-has-key() is used within a function to safely retrieve values from a map. If the key is not found, an error is thrown, helping prevent issues in your stylesheets.

🎉 Conclusion

The map-has-key() function in Sass is a valuable tool for any developer working with maps. It provides a simple way to check for the existence of keys, allowing you to write more robust and error-free Sass code. Whether you're managing themes, configurations, or dynamic styles, map-has-key() ensures that your code handles maps safely and efficiently.

By mastering map-has-key(), you can add an extra layer of reliability to your Sass projects, making your stylesheets more maintainable and your codebase more resilient.