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, ...

Get Mastering Sass now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.