CSS custom properties vs SASS variables - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS custom property for the main color.

SASS

:root { --main-color: [1]; }

Drag options to blanks, or click blank then click option'

Amain-color

B$main-color

C#3498db

Dvar(--main-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using SASS variable syntax ($main-color) instead of a CSS value.

Trying to use var() inside the property definition.

CSS custom properties are defined with --property-name and assigned a value like a color code.

2fill in blank

medium

Complete the SASS code to define a variable for the main color.

SASS

[1]: #e74c3c; body { color: $main-color; }

Drag options to blanks, or click blank then click option'

Amain-color

B$main-color

C$main_color

D$main-color:

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dollar sign.

Using hyphens incorrectly or missing the colon.

SASS variables start with a dollar sign $ and are assigned values with a colon.

3fill in blank

hard

Fix the error in the CSS code to use the custom property inside a style rule.

SASS

h1 { color: [1]; }

Drag options to blanks, or click blank then click option'

Avar(--main-color)

B--main-color

Cvar(main-color)

D$main-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without var().

Using SASS variable syntax in CSS.

To use a CSS custom property, you must wrap it with var(--property-name).

4fill in blank

hard

Fill both blanks to create a SASS map and access a color value.

SASS

$colors: (primary: [1], secondary: [2]); .btn { color: map-get($colors, primary); }

Drag options to blanks, or click blank then click option'

A#1abc9c

B#2ecc71

C$primary-color

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of color values.

Confusing keys and values in the map.

SASS maps hold key-value pairs. Colors are assigned as values like hex codes.

5fill in blank

hard

Fill all three blanks to define a CSS custom property and use it in a style.

SASS

:root { [1]: [2]; } p { color: [3]; }

Drag options to blanks, or click blank then click option'

A--accent-color

B#9b59b6

Cvar(--accent-color)

D$accent-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using SASS variable syntax instead of CSS custom properties.

Forgetting the var() function when using the property.

Define a CSS custom property with --name, assign a value, then use it with var(--name).