Why variables reduce repetition in SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use variables in Sass?

Which of the following best explains why using variables in Sass helps reduce repetition?

A Variables make the website load faster by compressing the CSS code.

B Variables automatically change colors on the website without any code changes.

C Variables let you store values once and reuse them, so you don’t have to write the same value multiple times.

D Variables replace all CSS selectors with shorter names to save space.

💡 Hint

Think about how you might use the same color or size many times in your styles.

Variables store a value once, like a color or size, so you can reuse it everywhere. This means you write the value only once, reducing repetition and making updates easier.

📝 Syntax

intermediate

Identify the correct Sass variable usage

Which option shows the correct way to define and use a variable for a primary color in Sass?

SASS

$primary-color: #3498db;

.button {
  background-color: ???;
}

A background-color: $primary-color;

B background-color: primary-color;

C background-color: #primary-color;

D background-color: var(primary-color);

💡 Hint

Remember Sass variables start with a $ sign and are used directly by name.

In Sass, variables start with a $ and are used by writing the $ followed by the variable name. So $primary-color is correct.

❓ rendering

advanced

What color will the button have?

Given the Sass code below, what color will the button background be when compiled to CSS and viewed in a browser?

SASS

$main-color: #e74c3c;
$secondary-color: #2ecc71;

.button {
  background-color: $main-color;
}

.button.secondary {
  background-color: $secondary-color;
}

A The button with class 'button' will be red (#e74c3c), and the button with classes 'button secondary' will be green (#2ecc71).

B Both buttons will be green (#2ecc71).

C Both buttons will be red (#e74c3c).

D The button with class 'button' will be green, and the 'button secondary' will be red.

💡 Hint

Look at which variable is used in each selector.

The .button class uses $main-color (#e74c3c), so it will be red. The .button.secondary class uses $secondary-color (#2ecc71), so it will be green.

❓ selector

advanced

How do variables help with selector consistency?

If you want to use the same font size in many selectors, how does using a Sass variable help compared to writing the font size directly each time?

A Variables automatically add vendor prefixes to selectors for better browser support.

B Using a variable means you only change the font size in one place, and all selectors using that variable update automatically.

C Variables let you write selectors faster by shortening their names.

D Variables prevent selectors from being overridden by other styles.

💡 Hint

Think about what happens if you want to change the font size later.

When you use a variable for font size, changing the variable value updates all selectors that use it, keeping styles consistent and saving time.

❓ accessibility

expert

Using variables to maintain accessible color contrast

You have variables for background and text colors in Sass. How can using variables help maintain good color contrast for accessibility when you update your design?

A Variables prevent colors from being changed accidentally by locking them.

B Variables automatically check color contrast and fix it for you.

C Variables let you hide colors from screen readers to improve accessibility.

D By changing the color variables, all elements using them update, making it easier to keep contrast consistent and accessible.

💡 Hint

Think about how changing one value affects many parts of your site.

Using variables for colors means you can update colors in one place and ensure all text and backgrounds maintain good contrast, which is important for accessibility.

Practice

1. Why do Sass variables help reduce repetition in your stylesheets?

easy

A. Because you write a value once and reuse it many times

B. Because they automatically generate CSS classes

C. Because they make your code run faster in the browser

D. Because they replace HTML tags with CSS

Solution

1. Step 1: Understand what variables do in Sass

   Sass variables store a value like a color or size once.

2. Step 2: See how variables reduce repetition

   Using the variable multiple times means you write the value only once, so you avoid repeating it.

3. Final Answer:

   Because you write a value once and reuse it many times -> Option A

4. Quick Check:

   Variables store values to reuse = C [OK]

Hint: Variables store once, reuse many times [OK]

Common Mistakes:

• Thinking variables create CSS classes
• Believing variables speed up browser rendering
• Confusing variables with HTML tags

2. Which of the following is the correct way to declare a variable for a color in Sass?

easy

A. main-color = #3498db;

B. var main-color: #3498db;

C. $main-color: #3498db;

D. #main-color: $3498db;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) followed by the name, then a colon and the value.

2. Step 2: Check each option

   The correct syntax is $main-color: #3498db; ($name: value;). A omits $ and uses =; C uses var; D uses #name: $value.

3. Final Answer:

   $main-color: #3498db; -> Option C

4. Quick Check:

   Sass variables start with $ = B [OK]

Hint: Variables start with $ and use colon : [OK]

Common Mistakes:

• Omitting the $ sign before variable name
• Using equal sign instead of colon
• Mixing variable and value order

3. What will be the background color of the button in this Sass code?

$btn-bg: #ff0000;
button {
  background-color: $btn-bg;
}

medium

A. Blue

B. Red

C. Green

D. No color (transparent)

Solution

1. Step 1: Identify the variable value

   The variable $btn-bg is set to #ff0000, which is the hex code for red.

2. Step 2: See how the variable is used

   The button's background-color is set to $btn-bg, so it will be red.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   $btn-bg = #ff0000 (red) used as background = D [OK]

Hint: Hex #ff0000 means red color [OK]

Common Mistakes:

• Confusing hex codes with other colors
• Ignoring variable usage in property
• Assuming default button color

4. Identify the error in this Sass code that uses variables:

$font-size: 16px
p {
  font-size: $font-size;
}

medium

A. Missing semicolon after variable declaration

B. Variable name should not start with $

C. font-size property is invalid

D. Variable value should be in quotes

Solution

1. Step 1: Check variable declaration syntax

   In Sass, each statement must end with a semicolon. The variable $font-size: 16px is missing a semicolon.

2. Step 2: Verify other parts

   The variable name correctly starts with $, font-size is a valid property, and numeric values do not need quotes.

3. Final Answer:

   Missing semicolon after variable declaration -> Option A

4. Quick Check:

   Semicolon missing after variable = A [OK]

Hint: End variable lines with semicolon ; [OK]

Common Mistakes:

• Forgetting semicolon after variable value
• Removing $ from variable name
• Adding quotes around numeric values

5. You want to change the primary color used in many places in your Sass file. Which approach best uses variables to make this easy?

hard

A. Use inline styles in HTML instead of Sass variables

B. Write the color code directly in every CSS rule

C. Use different variable names for each place you use the color

D. Define a variable $primary-color once and use it everywhere for that color

Solution

1. Step 1: Understand the goal of variables

   Variables let you store a value once and reuse it many times, so changing it once updates all uses.

2. Step 2: Evaluate options

   Define a variable $primary-color once and use it everywhere for that color uses one variable for the primary color everywhere, making updates easy. The other approaches do not reduce repetition or make updates easy.

3. Final Answer:

   Define a variable $primary-color once and use it everywhere for that color -> Option D

4. Quick Check:

   One variable for reuse = A [OK]

Hint: Use one variable for repeated values [OK]

Common Mistakes:

• Repeating color codes everywhere
• Using many variables for the same value
• Mixing CSS inline styles with Sass variables