Skip to Content
Learn
Your First Sass Stylesheet
Maps & Lists

In addition to color, numbers, strings, booleans, and null, Sass also has two other data types, lists and maps.

  • Lists can be separated by either spaces or commas. For example, the following list denotes font properties, such as:
1.5em Helvetica bold;

or

Helvetica, Arial, sans-serif;

Note: You can also surround a list with parentheses and create lists made up of lists.

  • Maps are very similar to lists, but instead each object is a key-value pair. The typical map looks like:
(key1: value1, key2: value2);

Note: In a map, the value of a key can be a list or another map.

Instructions

1.

At the top of main.scss, create a new list variable:

$standard-border: 4px solid black;

Find all of the instances that use 4px solid black in main.scss and replace them with the $standard-border variable reference. You’ve been using a list and you didn’t even know it!

Click “Run” to see your changes in the browser and inspect output in main.css.

Folder Icon

Sign up to start coding

Already have an account?