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.