Variable declaration with $ in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the Sass code below, what will be the compiled CSS output?

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
}

A SyntaxError: Undefined variable $primary-color

B

.button {
  background-color: #3498db;
  color: white;
}

C

.button {
  background-color: blue;
  color: white;
}

D

.button {
  background-color: $primary-color;
  color: white;
}

💡 Hint

Remember that variables in Sass start with $ and are replaced with their values during compilation.

The variable $primary-color is defined as #3498db. When compiled, Sass replaces $primary-color with #3498db in the CSS output.

🧠 Conceptual

intermediate

What error occurs if you use an undefined variable in Sass?

Consider this Sass code: .button { color: $text-color; } What happens when you compile this code?

SASS

.button {
  color: $text-color;
}

A The compiler will ignore the color property.

B The color will default to black automatically.

C The CSS output will have color: $text-color; unchanged.

D Compilation error: Undefined variable $text-color.

💡 Hint

Sass requires variables to be declared before use.

Using a variable that is not declared causes a compilation error because Sass cannot replace an undefined variable.

❓ selector

advanced

Which option correctly uses a variable inside a nested selector?

Given the variable declaration and nested selectors, which compiled CSS is correct?

SASS

$main-padding: 1rem;

.container {
  padding: $main-padding;
  .content {
    padding: $main-padding;
  }
}

A

.container {
  padding: 1rem;
}
.container .content {
  padding: 1rem;
}

B

.container {
  padding: $main-padding;
}
.content {
  padding: $main-padding;
}

C

.container {
  padding: 1rem;
  .content {
    padding: 1rem;
  }
}

D SyntaxError: Nested selectors cannot use variables

💡 Hint

Nested selectors in Sass compile to combined selectors in CSS with variables replaced.

Sass replaces variables with their values and compiles nested selectors into combined selectors in CSS.

❓ layout

advanced

How does changing a variable affect layout in Sass?

If you have this Sass code: $gap-size: 2rem; .grid { display: grid; gap: $gap-size; } What happens if you change $gap-size to 4rem and recompile?

SASS

$gap-size: 2rem;

.grid {
  display: grid;
  gap: $gap-size;
}

A Compilation error because $gap-size cannot be changed.

B The gap remains 2rem because variables don't affect layout.

C The space between grid items doubles from 2rem to 4rem.

D The grid layout breaks and items overlap.

💡 Hint

Variables let you change values in one place to update styles everywhere.

Changing $gap-size changes the gap property in the compiled CSS, affecting the space between grid items.

❓ accessibility

expert

How can Sass variables improve accessibility in color themes?

You want to create a dark mode theme using Sass variables for colors. Which approach best supports accessibility?

SASS

$text-color: #000;
$background-color: #fff;

body {
  color: $text-color;
  background-color: $background-color;
}

A Define separate variables for light and dark modes and switch them using a class on the body.

B Use only one variable for all colors to keep it simple.

C Hardcode colors directly in CSS without variables for better performance.

D Avoid using variables because they confuse screen readers.

💡 Hint

Accessibility needs clear contrast and easy theme switching.

Using variables for colors allows easy switching between themes, improving accessibility by maintaining good contrast.

Practice

1. What symbol is used to declare a variable in Sass?

easy

A. $

B. #

C. @

D. %

Solution

1. Step 1: Recall Sass variable syntax

   In Sass, variables always start with the $ symbol to distinguish them from other values.

2. Step 2: Identify the correct symbol

   Among the options, only $ is used for variables in Sass.

3. Final Answer:

   $ -> Option A

4. Quick Check:

   Variables start with $ in Sass [OK]

Hint: Remember: Sass variables always begin with $ [OK]

Common Mistakes:

• Using # or @ instead of $ for variables
• Confusing CSS IDs (#) with Sass variables
• Omitting the $ symbol before variable names

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

easy

A. main-color: $3498db;

B. $main-color: #3498db;

C. $main-color = #3498db;

D. @main-color: #3498db;

Solution

1. Step 1: Check variable declaration syntax

   Sass variables start with $, followed by the name, a colon, then the value, ending with a semicolon.

2. Step 2: Compare options

   $main-color: #3498db; matches the correct syntax: $main-color: #3498db;. Others use wrong symbols or order.

3. Final Answer:

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

4. Quick Check:

   Variable declaration uses $name: value; [OK]

Hint: Use $name: value; to declare variables in Sass [OK]

Common Mistakes:

• Using = instead of : to assign values
• Placing $ after the variable name
• Using @ instead of $ for variables

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. Green

C. Red

D. No color (default)

Solution

1. Step 1: Identify the variable value

   The variable $btn-bg is assigned the color #ff0000, which is red.

2. Step 2: Check usage in button style

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

3. Final Answer:

   Red -> Option C

4. Quick Check:

   $btn-bg = #ff0000 (red) [OK]

Hint: Match variable value to color code to find output [OK]

Common Mistakes:

• Confusing hex color codes with color names
• Forgetting to use $ before variable name
• Assuming default color if variable is used

4. Identify the error in this Sass variable declaration:

$font-size 16px;

medium

A. Variable name should not start with $

B. Semicolon is missing at the end

C. Value should be in quotes

D. Missing colon between variable name and value

Solution

1. Step 1: Review correct variable syntax

   Sass variables require a colon : between the name and value, like $font-size: 16px;.

2. Step 2: Identify missing colon

   The code misses the colon, causing a syntax error.

3. Final Answer:

   Missing colon between variable name and value -> Option D

4. Quick Check:

   Variable declaration needs colon : [OK]

Hint: Check for colon : after variable name [OK]

Common Mistakes:

• Omitting colon between name and value
• Using = instead of :
• Forgetting semicolon at end (less critical)

5. You want to create a Sass variable for spacing that changes based on screen size. Which is the best way to declare and use it?

$spacing: 1rem;

@media (min-width: 600px) {
  $spacing: 2rem;
}

.container {
  padding: $spacing;
}

hard

A. Variables cannot be redefined inside media queries

B. This works; $spacing changes inside media query

C. Use !default to change variable inside media query

D. Declare two variables and use @if to switch

Solution

1. Step 1: Understand Sass variable scope

   Sass variables are static and cannot change inside media queries because media queries are CSS rules, not Sass logic blocks.

2. Step 2: Evaluate the code behavior

   Redefining $spacing inside @media does not work; Sass processes variables before CSS is generated.

3. Step 3: Correct approach

   To handle responsive spacing, declare separate variables or use mixins/functions with media queries.

4. Final Answer:

   Variables cannot be redefined inside media queries -> Option A

5. Quick Check:

   Sass variables are static, not dynamic in media queries [OK]

Hint: Sass variables are static; media queries can't change them [OK]

Common Mistakes:

• Trying to redefine variables inside media queries
• Assuming Sass variables behave like CSS custom properties
• Not using separate variables or mixins for responsiveness