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

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

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
}

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
}

Hint

Use standard CSS properties inside the SASS selectors.

Practice

1. What does the Sass expression 10px + 5px produce?

easy

A. Syntax error

B. 105px

C. 15px

D. 5px

Solution

1. Step 1: Understand addition of units in Sass

   Sass adds numbers with the same units by adding their numeric values and keeping the unit.

2. Step 2: Calculate the sum of 10px and 5px

   10 + 5 equals 15, so the result is 15px.

3. Final Answer:

   15px -> Option C

4. Quick Check:

   10px + 5px = 15px [OK]

Hint: Add numbers only if units match exactly [OK]

Common Mistakes:

• Concatenating numbers as strings (getting 105px)
• Ignoring units and returning just number
• Thinking addition causes syntax error

2. Which of the following is the correct Sass syntax to multiply 8px by 3?

easy

A. 8px * 3

B. 8px x 3

C. multiply(8px, 3)

D. 8px ** 3

Solution

1. Step 1: Identify the multiplication operator in Sass

   Sass uses the asterisk (*) symbol for multiplication.

2. Step 2: Check each option for correct syntax

   8px * 3 uses * correctly; others use invalid syntax.

3. Final Answer:

   8px * 3 -> Option A

4. Quick Check:

   Multiplication uses * operator [OK]

Hint: Use * for multiplication, not x or other symbols [OK]

Common Mistakes:

• Using 'x' instead of '*' for multiplication
• Trying function calls like multiply() which Sass doesn't have
• Using ** which is not Sass syntax

3. What is the output of this Sass code?

$width: 20px;
$padding: 5px;
$total: $width + $padding * 2;

What is the value of $total?

medium

A. Syntax error

B. 50px

C. 60px

D. 30px

Solution

1. Step 1: Apply operator precedence in Sass arithmetic

   Multiplication (*) has higher precedence than addition (+), so calculate $padding * 2 first: 5px * 2 = 10px.

2. Step 2: Add $width and the multiplication result

   20px + 10px = 30px.

3. Final Answer:

   30px -> Option D

4. Quick Check:

   20px + (5px * 2) = 30px [OK]

Hint: Multiply before adding, like in normal math [OK]

Common Mistakes:

• Adding before multiplying (getting 50px)
• Confusing units causing syntax errors
• Ignoring operator precedence

4. Identify the error in this Sass code:

$height: 50px;
$width: 20;
$total: $height + $width;

medium

A. Error: Cannot add values with different units

B. No error, $total is 70px

C. Error: Missing semicolon after $width

D. Error: Variables must start with uppercase

Solution

1. Step 1: Check units of variables

   $height has unit px, but $width is a number without unit.

2. Step 2: Understand Sass unit rules for addition

   Sass cannot add numbers with different or missing units, so this causes an error.

3. Final Answer:

   Error: Cannot add values with different units -> Option A

4. Quick Check:

   Adding px and unitless number causes error [OK]

Hint: Always match units when adding or subtracting [OK]

Common Mistakes:

• Assuming unitless numbers auto-convert
• Thinking missing semicolon causes error here
• Believing variable names must be uppercase

5. You want to calculate the width of a container minus twice the padding using Sass variables:

$container-width: 1000px;
$padding: 20px;
$usable-width: $container-width - 2 * $padding;

What is the correct value of $usable-width?

hard

A. 960

B. 960px

C. 1040px

D. Syntax error

Solution

1. Step 1: Calculate twice the padding

   2 * $padding = 2 * 20px = 40px.

2. Step 2: Subtract twice the padding from container width

   1000px - 40px = 960px.

3. Final Answer:

   960px -> Option B

4. Quick Check:

   1000px - (2 * 20px) = 960px [OK]

Hint: Multiply padding first, then subtract from container width [OK]

Common Mistakes:

• Forgetting units in result (writing 960 without px)
• Adding instead of subtracting
• Syntax errors from missing spaces or operators