Arithmetic operations in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are arithmetic operations in Sass?

Arithmetic operations in Sass are calculations like addition (+), subtraction (-), multiplication (*), division (/), and modulo (%) used to compute values for styles.

beginner

How do you add two numbers in Sass?

You use the plus sign (+). For example: $total: 10 + 5; sets $total to 15.

beginner

What happens if you divide two numbers in Sass?

Sass divides the numbers and returns the result. For example, $result: 20 / 4; sets $result to 5.

intermediate

Can you use arithmetic operations with units in Sass? Give an example.

Yes, you can. For example, $width: 100px / 2; results in 50px. Sass keeps the unit when dividing or multiplying.

intermediate

What is the modulo (%) operation in Sass?

Modulo (%) gives the remainder of division. For example, 7 % 3 equals 1 because 3 goes into 7 twice with 1 left over.

Which symbol is used for multiplication in Sass arithmetic?

A *

B -

C +

D /

The asterisk (*) is used for multiplication in Sass.

What will $result: 15 - 5; set $result to?

A 5

B 20

C 10

D 0

15 minus 5 equals 10.

If $size: 50px / 5;, what is the value of $size?

A 10px

B 5px

C 250px

D 10

Dividing 50px by 5 results in 10px, Sass keeps the unit.

What does the modulo operator (%) return?

A The quotient of division

B The sum of two numbers

C The product of two numbers

D The remainder of division

Modulo (%) returns the remainder after division.

Which of these is NOT a valid arithmetic operator in Sass?

A +

B &

C *

D /

The ampersand (&) is not an arithmetic operator in Sass.

Explain how you can use arithmetic operations in Sass to calculate widths with units.

Think about how Sass handles units when you multiply or divide numbers.

Describe the modulo operation and give a simple example of when it might be useful in Sass.

Modulo helps find leftovers after dividing numbers.

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