Mastering Sass

Data types in Sass

If we look at the base-font-sizes-calc() function, we know it takes in a font family and then calculates the correct value to return. However, what if someone passed in a number? It's reasonable to assume something called base-font-sizes-calc() deals with numbers, right? So we need to make sure we are only getting a string, and if not we need to tell the user this function needs a string which is the font-family and not a number.

Sass has 7 main data types (8 if you count arg list):

• string [unquoted, "quoted string", 'single quoted string']
• number [1, 0.5, 1rem, 5px, 2em]
• bool [true, false]
• null [null]
• list [(1, 2, 3, 4), ("one" "two" "three")]
• map [(h1: 2rem, h2: 1.5rem, h3: 1.17rem)]
• color [#bada55, red, hsl(10, 30%, 50%), rgb(255, ...