CSS custom properties vs SASS variables - Quick Revision & Key Differences

Recall & Review

beginner

What is a CSS custom property?

A CSS custom property is a variable defined directly in CSS using the syntax --property-name. It can be accessed and changed in the browser at runtime.

intermediate

How do SASS variables differ from CSS custom properties?

SASS variables are defined in SASS files and replaced during compilation before the CSS is sent to the browser. CSS custom properties exist in the final CSS and can be changed dynamically in the browser.

beginner

Show an example of defining and using a CSS custom property.

Define: :root { --main-color: #3498db; }<br>Use: color: var(--main-color);

intermediate

Can CSS custom properties be changed with JavaScript after the page loads?

Yes, CSS custom properties can be updated dynamically using JavaScript, allowing live style changes without reloading the page.

intermediate

Why might you choose SASS variables over CSS custom properties?

Use SASS variables when you want to use variables during development for things like calculations or nesting, and when you don't need to change values dynamically in the browser.

Which of these can be changed dynamically in the browser after the page loads?

A CSS custom properties

B SASS variables

C Both CSS custom properties and SASS variables

D Neither CSS custom properties nor SASS variables

CSS custom properties exist in the final CSS and can be changed dynamically with JavaScript. SASS variables are compiled away before the page loads.

Where are SASS variables replaced with actual values?

A In the HTML file

B In the browser at runtime

C Only when JavaScript runs

D During SASS compilation before sending CSS to the browser

SASS variables are replaced during the compilation step before the CSS is sent to the browser.

How do you use a CSS custom property in your CSS code?

A custom-property(--property-name)

B var(--property-name)

C property-name()

D $property-name

CSS custom properties are accessed using the var(--property-name) syntax.

Which variable type supports calculations and functions during development?

A SASS variables

B Both support calculations

C CSS custom properties

D Neither support calculations

SASS variables support calculations and functions during compilation, which CSS custom properties do not.

What is the correct way to define a SASS variable?

A var(main-color): #333;

B --main-color: #333;

C $main-color: #333;

D main-color: #333;

SASS variables start with a dollar sign, like $main-color: #333;.

Explain the main differences between CSS custom properties and SASS variables.

Think about when and where each variable type works.

Describe a situation where you would prefer to use CSS custom properties over SASS variables.

Consider dynamic style changes after page load.