Arithmetic operations in SASS - Mini Project: Build & Apply

Arithmetic Operations with SASS

📖 Scenario: You are designing a simple webpage layout. You want to use SASS to calculate widths and margins using arithmetic operations to keep your CSS clean and easy to update.

🎯 Goal: Create a SASS stylesheet that uses arithmetic operations to calculate the width and margin of a container and a box inside it.

📋 What You'll Learn

Create variables for container width and margin

Use arithmetic operations to calculate box width

Apply the calculated widths and margins in CSS selectors

Use SASS variables and arithmetic correctly

💡 Why This Matters

🌍 Real World

Using SASS variables and arithmetic helps keep CSS consistent and easy to update when designing responsive layouts.

💼 Career

Front-end developers often use SASS to write maintainable and scalable stylesheets for websites and applications.

1

Create SASS variables for container width and margin

Create two SASS variables: $container-width set to 1200px and $container-margin set to 20px.

SASS

// Create variables $container-width and $container-margin
// Your code here

Need a hint?

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

2

Calculate box width using arithmetic

Create a new variable called $box-width that calculates the width as $container-width minus twice the $container-margin using SASS arithmetic.

SASS

$container-width: 1200px;
$container-margin: 20px;

// Calculate $box-width as $container-width minus 2 times $container-margin
// Your code here

Need a hint?

Use - and * operators to subtract and multiply in SASS.

3

Apply variables in CSS selectors

Write CSS rules for a .container class with width set to $container-width and margin set to $container-margin. Then write CSS rules for a .box class with width set to $box-width.

SASS

$container-width: 1200px;
$container-margin: 20px;

$box-width: $container-width - 2 * $container-margin;

.container {
  /* Set width and margin here */
  // Your code here
}

.box {
  /* Set width here */
  // Your code here
}

Need a hint?

Use the variables inside CSS properties like width: $variable;.

4

Add a background color and border to .box

Add a background-color of #f0f0f0 and a border of 1px solid #ccc to the .box class.

SASS

$container-width: 1200px;
$container-margin: 20px;

$box-width: $container-width - 2 * $container-margin;

.container {
  width: $container-width;
  margin: $container-margin;
}

.box {
  width: $box-width;
  /* Add background-color and border here */
  // Your code here
}

Need a hint?

Use standard CSS properties inside the SASS selectors.