Arithmetic operations in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add two numbers in Sass.

SASS

$sum: 5 [1] 3;

Drag options to blanks, or click blank then click option'

A/

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using - instead of + will subtract instead of add.

Using * or / will multiply or divide, not add.

The + operator adds two numbers in Sass.

2fill in blank

medium

Complete the code to multiply two numbers in Sass.

SASS

$product: 4 [1] 6;

Drag options to blanks, or click blank then click option'

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + will add instead of multiply.

Using / will divide instead of multiply.

The * operator multiplies two numbers in Sass.

3fill in blank

hard

Fix the error in the code to subtract numbers correctly in Sass.

SASS

$difference: 10 [1] 4;

Drag options to blanks, or click blank then click option'

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using + will add instead of subtract.

Using * or / will multiply or divide instead of subtract.

The - operator subtracts numbers in Sass.

4fill in blank

hard

Fill both blanks to calculate the remainder of division in Sass.

SASS

$remainder: 17 [1] 5 [2] 2;

Drag options to blanks, or click blank then click option'

A%

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using - instead of % will subtract, not find remainder.

Using * instead of + will multiply instead of add.

The % operator finds the remainder. Then + adds 2 to it.

5fill in blank

hard

Fill all three blanks to create a complex calculation in Sass.

SASS

$result: (8 [1] 2) [2] 3 [3] 4;

Drag options to blanks, or click blank then click option'

A*

B+

C-

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up operators order changes the result.

Using multiplication instead of remainder changes meaning.

First, find remainder of 8 % 2, then add 3, then subtract 4.

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