Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass map-values() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 7 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass map-values() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

👨‍đŸ’ģ Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy