O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required