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

Practice

1. Which of the following is true about CSS custom properties compared to SASS variables?

easy

A. SASS variables start with -- and are dynamic in the browser.

B. SASS variables start with -- and work in the browser at runtime.

C. CSS custom properties start with $ and are replaced before the browser sees CSS.

D. CSS custom properties start with -- and work in the browser at runtime.

Solution

1. Step 1: Identify CSS custom properties syntax

   CSS custom properties always start with -- and are live in the browser, meaning they can be changed dynamically.

2. Step 2: Identify SASS variables syntax and behavior

   SASS variables start with $ and are replaced during the build process, so they don't exist in the browser.

3. Final Answer:

   CSS custom properties start with -- and work in the browser at runtime. -> Option D

4. Quick Check:

   CSS variables = -- prefix and runtime [OK]

Hint: CSS vars use -- and work live; SASS vars use $ and compile away [OK]

Common Mistakes:

• Confusing $ and -- prefixes
• Thinking SASS variables work in the browser
• Assuming CSS variables are replaced before runtime

2. Which is the correct way to declare a SASS variable for a color?

easy

A. primary-color: #3498db;

B. --primary-color: #3498db;

C. $primary-color: #3498db;

D. $primary-color == #3498db;

Solution

1. Step 1: Recall SASS variable syntax

   SASS variables start with $ and use a colon : to assign values.

2. Step 2: Check each option

   $primary-color: #3498db; uses correct syntax. --primary-color: #3498db; uses the CSS custom property prefix. primary-color: #3498db; omits the $ prefix. $primary-color == #3498db; uses double equals which is invalid.

3. Final Answer:

   $primary-color: #3498db; -> Option C

4. Quick Check:

   SASS variable = $name: value; [OK]

Hint: SASS vars start with $ and use colon for assignment [OK]

Common Mistakes:

• Using -- instead of $ for SASS variables
• Using == instead of : for assignment
• Omitting $ prefix

3. Given the following code, what color will the text be in the browser?

:root { --main-color: red; }
.box { color: var(--main-color); }
$main-color: blue;
.box2 { color: $main-color; }

medium

A. Both .box and .box2 text will be red

B. .box text will be red; .box2 text will be blue

C. .box text will be blue; .box2 text will be red

D. Both .box and .box2 text will be blue

Solution

1. Step 1: Understand CSS custom property usage

   The --main-color is set to red in :root. The class .box uses var(--main-color), so it will be red at runtime.

2. Step 2: Understand SASS variable usage

   The SASS variable $main-color is blue and used in .box2. This is replaced during compilation, so .box2 color will be blue in the final CSS.

3. Final Answer:

   .box text will be red; .box2 text will be blue -> Option B

4. Quick Check:

   CSS var = red; SASS var = blue [OK]

Hint: CSS vars live in browser; SASS vars replaced before browser sees CSS [OK]

Common Mistakes:

• Thinking SASS variables work at runtime
• Confusing which variable affects which class
• Assuming CSS variables are replaced before runtime

4. What is wrong with this SASS code snippet?

$color: green;
.text { color: var($color); }

medium

A. The var() function is only for CSS custom properties, not SASS variables.

B. The variable name should start with -- instead of $.

C. SASS variables cannot be used inside var() function.

D. The color value green is invalid.

Solution

1. Step 1: Understand var() function usage

   The var() function is a CSS function used only for CSS custom properties (those starting with --).

2. Step 2: Understand SASS variable usage

   SASS variables start with $ and are used directly without var(). Using var($color) is invalid because var() expects a CSS custom property name.

3. Final Answer:

   The var() function is only for CSS custom properties, not SASS variables. -> Option A

4. Quick Check:

   var() = CSS vars only, not SASS [OK]

Hint: Use $var directly in SASS; var() only for CSS custom properties [OK]

Common Mistakes:

• Using var() with SASS variables
• Confusing $ and -- prefixes
• Thinking var() works for SASS variables

5. You want to create a theme where users can switch colors dynamically in the browser. Which approach is best and why?

$primary-color: #0055ff;
:root { --primary-color: #0055ff; }

hard

A. Use CSS custom property --primary-color because it can change dynamically in the browser.

B. Use SASS variable $primary-color because it compiles faster.

C. Use both SASS and CSS variables together for better performance.

D. Use inline styles instead of variables for dynamic changes.

Solution

1. Step 1: Understand dynamic changes in the browser

   CSS custom properties (starting with --) live in the browser and can be changed with JavaScript or media queries without recompiling CSS.

2. Step 2: Understand SASS variable limitations

   SASS variables are replaced during build time and cannot change after the CSS is loaded, so they are not suitable for dynamic theming.

3. Final Answer:

   Use CSS custom property --primary-color because it can change dynamically in the browser. -> Option A

4. Quick Check:

   Dynamic theme = CSS vars [OK]

Hint: Dynamic changes need CSS vars; SASS vars are static [OK]

Common Mistakes:

• Choosing SASS variables for runtime changes
• Thinking both together improve dynamic behavior
• Ignoring CSS custom properties' runtime flexibility