Number types and units in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output unit of this Sass calculation?

Consider the following Sass code snippet:

$width: 10px;
$height: 5em;
$area: $width * $height;

What is the unit of $area after this calculation?

SASS

$width: 10px;
$height: 5em;
$area: $width * $height;

A px

B em

C unitless number

D pxem

💡 Hint

Multiplying two numbers with different units combines their units in Sass.

When you multiply two Sass numbers with different units, the resulting unit is the concatenation of both units. Here, multiplying 10px by 5em results in 50pxem.

🧠 Conceptual

intermediate

Which Sass unit conversion is valid?

Given the Sass variables:

$length1: 2in;
$length2: 5cm;

Which operation will NOT cause an error in Sass?

SASS

$length1: 2in;
$length2: 5cm;

A $length1 * $length2

B $length1 / $length2

C $length1 + $length2

D $length1 - $length2

💡 Hint

Sass allows multiplication and division of numbers with different units but addition and subtraction require compatible units.

In Sass, adding or subtracting numbers with incompatible units like inches and centimeters causes an error. Multiplying or dividing them is allowed and results in combined units.

❓ selector

advanced

Which Sass code produces a unitless number?

Which of the following Sass expressions results in a unitless number?

A 10px / 2px

B 5em * 3

C 4cm + 2cm

D 8px - 3em

💡 Hint

Dividing two numbers with the same unit removes the units.

Dividing 10px by 2px cancels the units, resulting in a unitless number 5. Multiplying by a unitless number keeps the unit, adding or subtracting different units causes errors or keeps units.

❓ layout

advanced

How does Sass handle incompatible units in addition?

What happens when you try to add these Sass variables?

$a: 10px;
$b: 2em;
$c: $a + $b;

SASS

$a: 10px;
$b: 2em;
$c: $a + $b;

A $c equals 10px + 2em as a string

B Sass throws an error about incompatible units

C $c equals 10px2em (concatenated units)

D $c equals 12 (unitless)

💡 Hint

Sass requires units to be compatible for addition or subtraction.

Adding numbers with different units like px and em is not allowed in Sass and causes a compilation error.

❓ accessibility

expert

Which Sass unit usage best supports responsive and accessible design?

You want to set font sizes that scale well on different devices and respect user preferences.
Which unit should you use in Sass for font sizes to best support accessibility?

A px (pixels)

B cm (centimeters)

C em (relative to parent font size)

D pt (points)

💡 Hint

Relative units adapt better to user settings and screen sizes.

Using em units allows font sizes to scale relative to the parent element, supporting responsive layouts and user accessibility preferences better than fixed units like px or cm.