CSS custom properties vs SASS variables - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

How do CSS custom properties behave differently from SASS variables?

Which statement correctly describes a key difference between CSS custom properties and SASS variables?

A CSS custom properties are only available during SASS compilation, while SASS variables exist in the browser.

B SASS variables can be updated by JavaScript after the page loads, but CSS custom properties cannot.

C SASS variables support inheritance in CSS selectors, but CSS custom properties do not.

D CSS custom properties can be changed dynamically in the browser at runtime, while SASS variables are fixed at compile time.

💡 Hint

Think about when each variable type is processed and if they can be changed after the page loads.

CSS custom properties (variables) are part of the CSS language and exist in the browser. They can be updated dynamically using JavaScript or CSS at runtime. SASS variables are processed during the build step and do not exist in the browser, so they cannot be changed after compilation.

📝 Syntax

intermediate

Identify the valid CSS custom property syntax

Which option shows the correct way to define and use a CSS custom property?

A :root { $main-color: #3498db; } .btn { color: var($main-color); }

B :root { --main-color: #3498db; } .btn { color: $main-color; }

C :root { --main-color: #3498db; } .btn { color: var(--main-color); }

D :root { --main-color = #3498db; } .btn { color: var(--main-color); }

💡 Hint

CSS custom properties start with two dashes and use var() to access.

CSS custom properties are defined with two dashes (--) and accessed with the var() function. SASS variables use $ and are not valid in CSS.

❓ rendering

advanced

What color will the button text be?

Given this SASS and CSS code, what color will the button text appear in the browser?

SASS

$main-color: red;
:root {
  --main-color: blue;
}
.btn {
  color: $main-color;
  background-color: var(--main-color);
}

A Red text on blue background

B Blue text on blue background

C Red text on red background

D Blue text on red background

💡 Hint

Remember which variables are replaced during compilation and which are used by the browser.

The SASS variable $main-color is replaced with red during compilation, so color: $main-color; becomes color: red;. The CSS custom property --main-color is blue and used at runtime for background color.

❓ selector

advanced

Which selector correctly changes a CSS custom property for a specific element?

You want to change the CSS custom property --main-color only for buttons inside a <section>. Which CSS snippet does this correctly?

A section button { --main-color: green; }

B section button { color: var(--main-color: green); }

C section button { --main-color = green; }

D section button { $main-color: green; }

💡 Hint

CSS custom properties are set like normal CSS properties with two dashes.

To change a CSS custom property for specific elements, you set it as a normal CSS property with two dashes inside the selector. Option A does this correctly. Options A and B have invalid syntax. Option A uses SASS variable syntax, which is invalid in CSS.

❓ accessibility

expert

How can CSS custom properties improve accessibility?

Which approach best uses CSS custom properties to help users with visual impairments switch between color themes?

A Use SASS variables to define colors and recompile CSS for each theme.

B Define color variables with CSS custom properties and change their values on a parent element when toggling themes.

C Hardcode colors in CSS and use JavaScript to replace all color values inline when switching themes.

D Use inline styles on each element to set colors directly for each theme.

💡 Hint

Think about which method allows changing colors without recompiling or editing many elements.

CSS custom properties can be changed dynamically on a parent element, allowing easy theme switching without recompiling or editing many styles. This improves accessibility by letting users toggle themes instantly. SASS variables are static and require recompilation. Inline styles and JavaScript replacements are less efficient and harder to maintain.