Tutorials

Sass map-values() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The map-values() function in Sass is a convenient tool for retrieving all the values from a map data structure.

In Sass, maps are collections of key-value pairs, similar to associative arrays in other programming languages. The map-values() function extracts all the values from a map and returns them as a list.

This function is particularly useful when you need to manipulate or iterate over the values in a map without caring about the associated keys.

💡 Syntax

The syntax for the map-values() function is simple and direct. It takes one argument:

Syntax

Copied

map-values(map)

🔢 Parameters

map: The map from which you want to extract the values.

↩️ Return Value

The function returns a list containing all the values from the provided map. The order of values in the list matches the order of their corresponding keys in the map.

📝 Example Usage

Let's explore some examples to understand how map-values() can be utilized effectively in your Sass projects.

📜 Example 1: Basic Usage

example.scss

Copied

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

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

body {
  background-color: nth($color-values, 1); // #3498db
  color: nth($color-values, 3); // #e74c3c
}

In this example, the map-values() function extracts the values from the $colors map. The values are then accessed as a list using the nth() function to set background and text colors.

📜 Example 2: Iterating Over Values

example.scss

Copied

$spacing: (
  small: 8px,
  medium: 16px,
  large: 32px,
);

@each $value in map-values($spacing) {
  .m-#{$value} {
    margin: $value;
  }
}

Here, map-values() is used to iterate over the spacing values in a map, creating utility classes for margin sizes.

📜 Example 3: Using Map Values in Mixins

example.scss

Copied

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

@mixin set-font-sizes($map) {
  @each $value in map-values($map) {
    .font-#{$value} {
      font-size: $value;
    }
  }
}

@include set-font-sizes($font-sizes);

This example demonstrates how to use map-values() in a mixin to dynamically generate font-size classes based on a map of font sizes.

🎉 Conclusion

The map-values() function in Sass is an essential utility for working with maps, enabling you to easily extract and manipulate the values within a map. Whether you're creating dynamic styles, iterating over data, or simplifying your code, map-values() can streamline your workflow and reduce repetitive tasks.

By leveraging the power of map-values(), you can enhance your Sass projects, making your stylesheets more maintainable and efficient. Experiment with this function to see how it can simplify your approach to working with maps in Sass.