Built-in math functions in SASS - Mini Project: Build & Apply

Using Built-in Math Functions in Sass

📖 Scenario: You are designing a simple webpage style where you want to use Sass math functions to calculate sizes dynamically. This helps keep your styles neat and consistent.

🎯 Goal: Build a Sass stylesheet that uses built-in math functions like round(), ceil(), and floor() to set font sizes and spacing.

📋 What You'll Learn

Create variables with decimal numbers

Create a variable to hold a rounded value using round()

Use ceil() and floor() functions to calculate other sizes

Apply these calculated sizes to CSS properties in a selector

💡 Why This Matters

🌍 Real World

Web designers often use Sass math functions to keep their styles consistent and easy to update by calculating sizes dynamically.

💼 Career

Knowing how to use Sass math functions is useful for front-end developers and UI designers to write cleaner, maintainable CSS.

1

Create decimal number variables

Create two variables in Sass called $base-font-size with the value 1.25rem and $spacing with the value 2.7rem.

SASS

# Create variables $base-font-size and $spacing with values 1.25rem and 2.7rem
# Your code here

Hint

Use the $ symbol to create variables in Sass.

2

Create a rounded font size variable

Create a new variable called $rounded-font-size that uses the Sass round() function on $base-font-size.

SASS

$base-font-size: 1.25rem;
$spacing: 2.7rem;

# Create $rounded-font-size using round() on $base-font-size
# Your code here

Hint

Use round() to round decimal numbers in Sass.

3

Calculate spacing using ceil() and floor()

Create two new variables: $spacing-ceil using ceil() on $spacing, and $spacing-floor using floor() on $spacing.

SASS

$base-font-size: 1.25rem;
$spacing: 2.7rem;

$rounded-font-size: round($base-font-size);

# Create $spacing-ceil using ceil() on $spacing
# Create $spacing-floor using floor() on $spacing
# Your code here

Hint

Use ceil() to round up and floor() to round down decimal numbers.

4

Apply calculated sizes in CSS

Create a CSS rule for the selector .content that sets font-size to $rounded-font-size, margin-top to $spacing-ceil, and margin-bottom to $spacing-floor.

SASS

$base-font-size: 1.25rem;
$spacing: 2.7rem;

$rounded-font-size: round($base-font-size);

$spacing-ceil: ceil($spacing);
$spacing-floor: floor($spacing);

# Create .content selector with font-size, margin-top, and margin-bottom using the variables
# Your code here

Hint

Use the variables inside the CSS properties by writing their names with $.