Sass Map

Sass map functions provide powerful tools for working with key-value pairs, allowing you to store and manipulate complex data structures in your stylesheets. Maps are essential for creating organized, maintainable, and dynamic styles. This guide covers the fundamental Sass map functions, complete with practical examples.

What Are Sass Map Functions?

Sass map functions enable you to create, access, modify, and iterate over maps. Maps in Sass store key-value pairs, making them ideal for organizing related styles, such as theme settings, responsive breakpoints, and more.

Common Sass Map Functions:

1. map-get()
2. map-set()
3. map-remove()
4. map-merge()
5. map-keys()
6. map-values()
7. map-has-key()
8. map-deep-merge()

1. map-get(): Accessing Values:

The map-get() function retrieves the value associated with a specified key from a map.

Syntax: map-get($map, $key)

Example:

$theme-colors: (
  primary: #ff6347,
  secondary: #4682b4,
  accent: #32cd32
);

.primary-color {
  color: map-get($theme-colors, primary);
}

Compiled CSS:

.primary-color {
  color: #ff6347;
}

2. map-set(): Adding or Updating Values:

The map-set() function adds a new key-value pair to a map or updates the value of an existing key.

Syntax: map-set($map, $key, $value)

Example:

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

$updated-font-sizes: map-set($font-sizes, large, 20px);

.large-text {
  font-size: map-get($updated-font-sizes, large);
}

Compiled CSS:

.large-text {
  font-size: 20px;
}

3. map-remove(): Removing Key-Value Pairs:

The map-remove() function removes a specified key-value pair from a map.

Syntax: map-remove($map, $keys...)

Example:

$spacing: (
  margin: 10px,
  padding: 15px,
  border: 1px solid #ccc
);

$reduced-spacing: map-remove($spacing, border);

.box {
  margin: map-get($reduced-spacing, margin);
}

Compiled CSS:

.box {
  margin: 10px;
}

4. map-merge(): Combining Maps:

The map-merge() function merges two maps into one, with values from the second map overriding those in the first map when keys are duplicated.

Syntax: map-merge($map1, $map2)

Example:

$default-colors: (
  background: #ffffff,
  text: #000000
);

$custom-colors: (
  text: #333333,
  border: #dddddd
);

$merged-colors: map-merge($default-colors, $custom-colors);

body {
  background: map-get($merged-colors, background);
  color: map-get($merged-colors, text);
}

Compiled CSS:

body {
  background: #ffffff;
  color: #333333;
}

5. map-keys(): Extracting Keys:

The map-keys() function returns a list of all keys in a map.

Syntax: map-keys($map)

Example:

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

$keys: map-keys($breakpoints);

p::before {
  content: inspect($keys);
}

Compiled CSS:

p::before {
  content: "small, medium, large";
}

6. map-values(): Extracting Values:

The map-values() function returns a list of all values in a map.

Syntax: map-values($map)

Example:

$font-families: (
  heading: Arial,
  body: Georgia,
  code: Courier
);

$values: map-values($font-families);

.info::before {
  content: inspect($values);
}

Compiled CSS:

.info::before {
  content: "Arial, Georgia, Courier";
}

7. map-has-key(): Checking for Keys:

The map-has-key() function checks if a specified key exists in a map.

Syntax: map-has-key($map, $key)

Example:

$shadows: (
  light: 1px 1px 5px #aaa,
  medium: 2px 2px 10px #888
);

$has-dark: map-has-key($shadows, dark);

.info::before {
  content: if($has-dark, "Shadow exists", "Shadow does not exist");
}

Compiled CSS:

.info::before {
  content: "Shadow does not exist";
}

8. map-deep-merge(): Deep Merging Maps:

The map-deep-merge() function merges maps deeply, combining nested maps.

Syntax: map-deep-merge($maps...)

Example:

$base-theme: (
  colors: (
    primary: blue,
    secondary: green
  )
);

$custom-theme: (
  colors: (
    primary: red
  )
);

$merged-theme: map-deep-merge($base-theme, $custom-theme);

body {
  color: map-get(map-get($merged-theme, colors), primary);
}

Compiled CSS:

body {
  color: red;
}

Practical Use Cases:

1. Theme Management:

Organize and manage theme settings using maps.

Example:

$theme: (
  colors: (
    primary: #007bff,
    secondary: #6c757d
  ),
  fonts: (
    base: Arial,
    headings: Helvetica
  )
);

body {
  color: map-get(map-get($theme, colors), primary);
  font-family: map-get(map-get($theme, fonts), base);
}

Compiled CSS:

body {
  color: #007bff;
  font-family: Arial;
}

2. Responsive Breakpoints:

Define and use responsive breakpoints with maps.

Example:

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@media (min-width: map-get($breakpoints, md)) {
  .container {
    padding: 1rem;
  }
}

Compiled CSS:

@media (min-width: 768px) {
  .container {
    padding: 1rem;
  }
}

3. Utility Classes:

Create utility classes with configurable properties using maps.

Example:

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

@mixin spacing-utilities($spacing) {
  @each $size, $value in $spacing {
    .m-#{$size} {
      margin: $value;
    }
    .p-#{$size} {
      padding: $value;
    }
  }
}

@include spacing-utilities($spacing);

Compiled CSS:

.m-small {
  margin: 4px;
}

.p-small {
  padding: 4px;
}

.m-medium {
  margin: 8px;
}

.p-medium {
  padding: 8px;
}

.m-large {
  margin: 16px;
}

.p-large {
  padding: 16px;
}

Conclusion:

Sass map functions provide an effective way to manage and manipulate key-value pairs in your stylesheets. Whether you’re defining themes, responsive breakpoints, or utility classes, maps enable you to organize and control your styles efficiently. By leveraging Sass map functions, you can create dynamic, maintainable, and scalable CSS that adapts to various use cases and requirements.