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

Need a 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

Need a 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
}

Need a 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
}

Need a hint?

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