Number types and units in SASS - Mini Project: Build & Apply

Number Types and Units in Sass

📖 Scenario: You are creating a simple style for a webpage section. You want to practice using different number types and units in Sass variables to control spacing and sizes.

🎯 Goal: Build a Sass stylesheet that defines variables with different number types and units, then use them to style a <section> with padding, margin, and font size.

📋 What You'll Learn

Create Sass variables with different number types and units

Use variables in CSS properties inside a section selector

Demonstrate unitless numbers, lengths with units (rem, em, px), and percentages

Write valid Sass code that compiles to CSS

💡 Why This Matters

🌍 Real World

Using variables with different number types and units in Sass helps keep styles consistent and easy to update in real websites.

💼 Career

Front-end developers often use Sass variables to manage spacing, sizing, and responsive design efficiently.

1

Create Sass variables with number values

Create three Sass variables: $base-padding set to 1.5rem, $font-scale set to the unitless number 1.2, and $max-width set to 960px.

SASS

# Create the variables $base-padding, $font-scale, and $max-width with the exact values
# Your code here

Hint

Remember to include the dollar sign $ before variable names and end each line with a semicolon.

2

Add a percentage variable for width limit

Add a new Sass variable called $width-limit and set it to 90%.

SASS

$base-padding: 1.5rem;
$font-scale: 1.2;
$max-width: 960px;

# Add the variable $width-limit with value 90%
# Your code here

Hint

Percentages in Sass variables include the percent sign % after the number.

3

Use variables in the section style

Write a section style block that uses the variables: set padding to $base-padding, max-width to $max-width, and width to $width-limit.

SASS

$base-padding: 1.5rem;
$font-scale: 1.2;
$max-width: 960px;
$width-limit: 90%;

section {
  /* Use $base-padding for padding */
  /* Use $max-width for max-width */
  /* Use $width-limit for width */
  # Your code here
}

Hint

Use the variables directly in the property values inside the section block.

4

Add font size using unitless number with multiplication

Inside the section style block, add a font-size property that multiplies 1rem by the variable $font-scale.

SASS

$base-padding: 1.5rem;
$font-scale: 1.2;
$max-width: 960px;
$width-limit: 90%;

section {
  padding: $base-padding;
  max-width: $max-width;
  width: $width-limit;
  /* Add font-size multiplying 1rem by $font-scale */
  # Your code here
}

Hint

Multiply the unitless number variable by a length unit like 1rem to get a scaled font size.

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