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:
or
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:
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:
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.