Fluid spacing with calculations in SASS - Mini Project: Build & Apply

Fluid Spacing with Calculations using Sass

📖 Scenario: You are building a simple webpage layout that needs consistent spacing between sections. Instead of fixed spacing, you want the spacing to adjust fluidly based on the viewport width, so it looks good on phones, tablets, and desktops.

🎯 Goal: Create a Sass stylesheet that defines a fluid spacing variable using calculations. Use this variable to set the margin between sections so the spacing grows smoothly from 1rem on small screens to 3rem on large screens.

📋 What You'll Learn

Create a Sass variable $min-spacing with value 1rem

Create a Sass variable $max-spacing with value 3rem

Create a Sass variable $min-vw with value 320 (representing 320px viewport width)

Create a Sass variable $max-vw with value 1200 (representing 1200px viewport width)

Create a Sass variable $fluid-spacing that calculates spacing fluidly between $min-spacing and $max-spacing based on viewport width using calc() and CSS vw units

Use $fluid-spacing to set the margin-bottom of all section elements

💡 Why This Matters

🌍 Real World

Fluid spacing helps webpages look good on all screen sizes by adjusting space smoothly instead of jumping between fixed values.

💼 Career

Understanding fluid spacing with Sass and CSS calculations is important for front-end developers to create responsive, modern layouts.

1

Set up base spacing variables

Create Sass variables called $min-spacing with value 1rem and $max-spacing with value 3rem.

SASS

# Your code here

Hint

Use $variable-name: value; syntax to create variables in Sass.

2

Add viewport width variables

Add Sass variables called $min-vw with value 320 and $max-vw with value 1200 to represent viewport widths in pixels.

SASS

$min-spacing: 1rem;
$max-spacing: 3rem;
# Your code here

Hint

These numbers represent the minimum and maximum viewport widths in pixels.

3

Create fluid spacing calculation

Create a Sass variable called $fluid-spacing that uses calc() to calculate spacing fluidly between $min-spacing and $max-spacing based on viewport width. Use this formula inside calc(): $min-spacing + ($max-spacing - $min-spacing) * ((100vw - #{$min-vw}px) / (#{$max-vw} - #{$min-vw})).

SASS

$min-spacing: 1rem;
$max-spacing: 3rem;
$min-vw: 320;
$max-vw: 1200;
# Your code here

Hint

Use string interpolation #{$variable} inside calc() to insert Sass variables.

4

Apply fluid spacing to sections

Write a CSS rule for section elements that sets margin-bottom to the $fluid-spacing variable.

SASS

$min-spacing: 1rem;
$max-spacing: 3rem;
$min-vw: 320;
$max-vw: 1200;
$fluid-spacing: calc(#{$min-spacing} + (#{$max-spacing} - #{$min-spacing}) * ((100vw - #{$min-vw}px) / (#{$max-vw} - #{$min-vw})));

# Your code here

Hint

Use a CSS selector section and set margin-bottom to $fluid-spacing.