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.