Number types and units in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the main number types used in Sass?

Sass mainly uses two number types: unitless numbers (like 5, 10) and numbers with units (like 5px, 2em, 50%).

intermediate

How does Sass handle arithmetic with different units?

Sass can add, subtract, multiply, and divide numbers with units if the units are compatible. For example, you can add 10px + 5px, but not 10px + 5em without conversion.

beginner

What happens if you multiply a number with a unit by a unitless number in Sass?

The unit stays the same. For example, 5px * 2 results in 10px. The unitless number scales the value but does not change the unit.

beginner

Name some common CSS units that Sass supports.

Common units include px (pixels), em (relative to font size), rem (root font size), % (percentage), vh and vw (viewport height and width).

intermediate

Can Sass convert between different units automatically?

No, Sass does not convert units automatically. You must manually convert units or use functions to handle unit conversions.

Which of these is a unitless number in Sass?

A 50%

B 10px

C 5em

D 10

Only '10' has no unit, so it is unitless.

What is the result of 5px * 3 in Sass?

A 15px

B 5px3

C 8px

D 15

Multiplying a number with a unit by a unitless number keeps the unit: 5px * 3 = 15px.

Can you add 10px + 5em directly in Sass?

A No, units must be compatible

B Yes, always

C Yes, but only in SCSS syntax

D Only if you use a special function

Sass requires compatible units to add numbers directly.

Which unit represents a percentage in Sass?

A px

B %

C em

D rem

The '%' symbol is used for percentages.

Does Sass automatically convert 1in to 96px?

A Yes

B Only in SCSS

C No

D Only with a plugin

Sass does not convert units automatically; you must convert manually.

Explain the difference between unitless numbers and numbers with units in Sass.

Think about how Sass treats plain numbers versus numbers with px, em, %.

Describe how Sass handles arithmetic operations involving units.

Consider what happens when you add 10px + 5px versus 10px + 5em.

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