Future CSS features replacing SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable for primary color.

SASS

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

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

A#3498db

B$primary-color

Cprimary-color

Dvar(--primary-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using SASS variable syntax like $primary-color inside CSS variable declaration.

Using var() inside the variable definition.

CSS variables start with -- and are assigned values like colors directly. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to use the CSS variable for background color.

SASS

button { background-color: [1]; }

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

A$primary-color

Bprimary-color

C--primary-color

Dvar(--primary-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using SASS variable syntax like $primary-color.

Using the variable name without var(), like --primary-color.

To use a CSS variable, you write var(--variable-name). This tells the browser to use the value stored in the variable.

3fill in blank

hard

Fix the error in the CSS nesting syntax using future CSS features.

SASS

nav {
  [1] {
    color: black;
  }
}

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

A& ul li

B& ul

C& > ul > li

D& > ul

Attempts:

3 left

💡 Hint

Common Mistakes

Using SASS nesting syntax with no & symbol.

Using child selector > when not needed.

Future CSS nesting uses the & symbol to refer to the parent selector. To select a nested ul inside nav, use & ul.

4fill in blank

hard

Fill both blanks to create a CSS rule that applies styles only when the screen width is at least 600px.

SASS

@media ([1]: [2]) { body { font-size: 1.2rem; } }

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

Amin-width

Bmax-width

C600px

D1.2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width.

Using units other than px for media queries.

The media feature min-width applies styles when the viewport is at least the given width, here 600px.

5fill in blank

hard

Fill all three blanks to create a CSS custom property with a fallback value and use it in a style.

SASS

:root { --main-color: [1]; } h1 { color: var([2], [3]); }

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

A#ff6347

B--main-color

C#000000

D#ffffff

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the double dash -- in the variable name inside var().

Using a variable name without var() function.

The custom property --main-color is set to #ff6347. The var() function uses --main-color with a fallback color #000000 if the variable is not set.