Maps for grouped values in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a map in Sass?

A map in Sass is a collection of key-value pairs, like a list but each item has a name (key) and a value. It helps group related values together.

beginner

How do you create a map with grouped values in Sass?

Use parentheses with key: value pairs separated by commas. Example: $colors: (primary: #333, secondary: #666);

beginner

How do you access a value inside a Sass map?

Use the map-get() function with the map and the key. Example: map-get($colors, primary) returns #333.

intermediate

Why use maps for grouped values in Sass?

Maps keep related values organized and easy to update. For example, grouping all colors or font sizes in one place makes your code cleaner and easier to maintain.

intermediate

How can you add a new key-value pair to an existing Sass map?

Use the map-merge() function to combine the original map with a new map containing the new pair. Example: $new-map: map-merge($colors, (accent: #f00));

What does this Sass code create? $sizes: (small: 1rem, large: 2rem);

A A variable with two separate values

B A map with keys 'small' and 'large' and their values

C A list of two values 1rem and 2rem

D A CSS class named sizes

The code creates a map with keys 'small' and 'large' each assigned a value.

How do you get the value for 'primary' from $colors: (primary: #333, secondary: #666)?

A $colors.primary

B get($colors, 'primary')

C map-get($colors, primary)

D $colors[primary]

Use map-get() with the map and the key to access the value.

Which function adds new pairs to an existing Sass map?

A map-update()

B map-add()

C map-insert()

D map-merge()

map-merge() combines two maps, adding new pairs or updating existing ones.

Why are maps useful for grouped values in Sass?

A They organize related values for easy use and updates

B They make CSS run faster

C They replace variables completely

D They create animations automatically

Maps help keep related values together, making code cleaner and easier to maintain.

What is the correct syntax to define a Sass map?

A $map: (key1: value1, key2: value2);

B $map = {key1: value1, key2: value2};

C $map: [key1, value1, key2, value2];

D $map: key1 => value1, key2 => value2;

Sass maps use parentheses with key: value pairs separated by commas.

Explain how to create and use a map for grouped values in Sass.

Think about how you group related things in real life, like a box with labeled compartments.

Describe why maps are helpful when writing Sass styles.

Imagine keeping all your tools in one toolbox instead of scattered around.