Number types and units in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width to 100 pixels.

SASS

$width: 100[1];

Drag options to blanks, or click blank then click option'

Apx

Bem

C%

Drem

Attempts:

3 left

💡 Hint

Common Mistakes

Using % instead of px for fixed pixel width.

Forgetting to add any unit after the number.

The px unit means pixels, which sets the width to exactly 100 pixels.

2fill in blank

medium

Complete the code to set the font size to 1.5 times the root element's font size.

SASS

font-size: 1.5[1];

Drag options to blanks, or click blank then click option'

Apx

Bem

C%

Drem

Attempts:

3 left

💡 Hint

Common Mistakes

Using em instead of rem when root-relative size is needed.

Using px which is fixed and not scalable.

The rem unit means relative to the root element's font size, so 1.5rem scales accordingly.

3fill in blank

hard

Fix the error in the code to correctly add 10 pixels to the margin.

SASS

margin: 20px + [1];

Drag options to blanks, or click blank then click option'

A10

B10px

C10em

D10%

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a number without units to a length with units.

Using a different unit like em which causes unit mismatch.

When adding lengths in Sass, both values must have units. So 10px is correct.

4fill in blank

hard

Fill both blanks to create a Sass map with font sizes in rem units for small and large text.

SASS

$font-sizes: (small: [1], large: [2]);

Drag options to blanks, or click blank then click option'

A0.875rem

B1.25rem

C1rem

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using px units instead of rem in the map.

Swapping the small and large values.

The small font size is 0.875rem and the large font size is 2rem, both relative to root font size.

5fill in blank

hard

Fill all three blanks to create a Sass map that stores widths with different units.

SASS

$widths: (mobile: [1], tablet: [2], desktop: [3]);

Drag options to blanks, or click blank then click option'

A320px

B48rem

C768px

D64rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using rem units for mobile width which is usually fixed in pixels.

Mixing up tablet and desktop widths.

The mobile width is 320px, tablet width is 768px, and desktop width is 64rem for scalable layout.

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