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.

Practice

1. Which of the following is a valid Sass number with a unit?

easy

A. 20pixels

B. 12px

C. 15percent

D. 30ptx

Solution

1. Step 1: Understand Sass number units

   Sass supports standard CSS units like px, %, em, rem, etc.

2. Step 2: Check each option for valid unit

   12px uses a valid unit px. Others use invalid or misspelled units.

3. Final Answer:

   12px -> Option B

4. Quick Check:

   Valid CSS unit = 12px [OK]

Hint: Look for standard CSS units like px, %, em, rem [OK]

Common Mistakes:

• Confusing 'percent' with '%' unit
• Using non-standard unit names like 'pixels'
• Misspelling units like 'ptx'

2. Which Sass number is written with correct syntax?

easy

A. 5em

B. 15 rems

C. 20 %

D. 10 px

Solution

1. Step 1: Check spacing between number and unit

   Sass numbers must have no space between the number and unit.

2. Step 2: Validate each option

   5em is correct with no space. Others have spaces or invalid units.

3. Final Answer:

   5em -> Option A

4. Quick Check:

   No space between number and unit = 5em [OK]

Hint: No spaces allowed between number and unit in Sass [OK]

Common Mistakes:

• Adding space between number and unit
• Using plural forms like 'rems'
• Confusing unit syntax with CSS property values

3. What will be the output of this Sass code?

$width: 10px * 2;
.result {
  width: $width;
}

medium

A. width: 10px2;

B. width: 10px;

C. width: 20px;

D. width: 20;

Solution

1. Step 1: Multiply number with unit by a unitless number

   Multiplying 10px by 2 doubles the value but keeps the unit.

2. Step 2: Resulting value and unit

   The result is 20px, which is valid CSS for width.

3. Final Answer:

   width: 20px; -> Option C

4. Quick Check:

   10px * 2 = 20px [OK]

Hint: Multiply unit number by unitless number keeps unit [OK]

Common Mistakes:

• Concatenating number and unit as string
• Losing unit after multiplication
• Expecting unit to change or disappear

4. Identify the error in this Sass code:

$height: 50px + 10;
.box {
  height: $height;
}

medium

A. Adding a unitless number to a number with unit causes error

B. Variable name cannot start with $

C. Missing semicolon after variable declaration

D. Units must be written in uppercase

Solution

1. Step 1: Check operation between numbers with and without units

   Sass cannot add a unitless number to a number with units directly.

2. Step 2: Identify the error cause

   Adding 50px and 10 (unitless) causes a unit mismatch error.

3. Final Answer:

   Adding a unitless number to a number with unit causes error -> Option A

4. Quick Check:

   Unit mismatch in addition = error [OK]

Hint: Cannot add unitless number to number with unit directly [OK]

Common Mistakes:

• Assuming variable names can't start with $
• Forgetting semicolons (Sass allows optional semicolons)
• Thinking units are case sensitive

5. You want to create a responsive padding that is 2rem on small screens and 5% on large screens using Sass variables. Which approach correctly defines and uses these units?

hard

A. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: calc($small-padding + $large-padding);
}

B. $small-padding: 2;
$large-padding: 5;
.container {
padding: $small-padding rem;
@media (min-width: 768px) {
padding: $large-padding %;
}
}

C. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: $small-padding + $large-padding;
}

D. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: $small-padding;
@media (min-width: 768px) {
padding: $large-padding;
}
}

Solution

1. Step 1: Define variables with units included

   Variables must include units like 2rem and 5% directly.

2. Step 2: Use variables correctly in media queries

   Apply $small-padding normally and override with $large-padding inside media query.

3. Step 3: Avoid invalid syntax

   The other options misuse units or try invalid operations like adding different units.

4. Final Answer:

   Defines variables with units and uses media queries -> Option D

5. Quick Check:

   Variables with units + media query = responsive padding [OK]

Hint: Include units in variables; use media queries to switch values [OK]

Common Mistakes:

• Trying to add numbers with different units
• Writing units outside variables incorrectly
• Using calc() with Sass variables without interpolation