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.

Practice

1. Which future CSS feature allows you to store reusable values like colors or sizes directly in CSS without using SASS variables?

easy

A. CSS Modules

B. CSS Custom Properties (variables)

C. CSS Functions

D. CSS Mixins

Solution

1. Step 1: Understand CSS Custom Properties

   CSS Custom Properties let you define variables using the syntax --name: value; inside selectors.

2. Step 2: Compare with SASS variables

   SASS variables are replaced by CSS Custom Properties which work natively in browsers and can be reused.

3. Final Answer:

   CSS Custom Properties (variables) -> Option B

4. Quick Check:

   Variables in CSS = CSS Custom Properties [OK]

Hint: Remember CSS variables start with double dashes -- [OK]

Common Mistakes:

• Confusing CSS Mixins with variables
• Thinking CSS Functions are variables
• Assuming CSS Modules are variables

2. Which of the following is the correct syntax for nesting selectors using future CSS features (without SASS)?

easy

A. nav { ul { list-style: none; } }

B. nav > ul { list-style: none; }

C. nav { & ul { list-style: none; } }

D. nav ul { list-style: none; }

Solution

1. Step 1: Understand future CSS nesting syntax

   Future CSS uses the & nesting selector to nest selectors, e.g., nav { & ul { list-style: none; } }.

2. Step 2: Compare with SASS nesting

   SASS allows direct nesting like nav { ul { ... } }, but future CSS requires & or pseudo-classes like :is() or :where().

3. Final Answer:

   nav { & ul { list-style: none; } } -> Option C

4. Quick Check:

   Nesting in CSS uses & or :is()/:where() [OK]

Hint: Future CSS nesting uses & nesting selector [OK]

Common Mistakes:

• Using SASS style nesting directly (without &)
• Confusing child selector > with nesting
• Using descendant selector without nesting

3. What will be the computed background color of the <div> in this CSS using future CSS variables?

:root { --main-color: coral; } div { background-color: var(--main-color); }

medium

A. var(--main-color)

B. transparent

C. black

D. coral

Solution

1. Step 1: Identify the variable definition

   The variable --main-color is set to coral in the :root selector, making it global.

2. Step 2: Apply the variable in div

   The div uses background-color: var(--main-color); which fetches the value coral.

3. Final Answer:

   coral -> Option D

4. Quick Check:

   CSS variable value applied = coral [OK]

Hint: var() fetches the value of CSS custom properties [OK]

Common Mistakes:

• Thinking var() outputs the variable name
• Assuming default color if variable is defined
• Confusing transparent with variable usage

4. Identify the error in this future CSS code snippet that tries to use nesting:

section { article { padding: 1rem; } }

medium

A. Nesting must use & or :is() or :where()

B. The ampersand (&) is not supported in future CSS nesting

C. Incorrect property name 'padding'

D. Missing semicolon after padding value

Solution

1. Step 1: Check nesting syntax in future CSS

   Future CSS requires nested selectors to start with & or pseudo-classes like :is() or :where(). Plain article is invalid.

2. Step 2: Identify correct nesting method

   Correct would be section { & article { padding: 1rem; } } or using pseudo-classes.

3. Final Answer:

   Nesting must use & or :is() or :where() -> Option A

4. Quick Check:

   Future CSS nesting requires & or pseudo-classes [OK]

Hint: Future CSS nesting requires & or :is()/:where() [OK]

Common Mistakes:

• Using plain selectors without & or pseudo-class
• Ignoring missing semicolon which is correct here
• Confusing property names

5. You want to create a responsive design using future CSS features replacing SASS. Which is the correct way to write a media query that changes font size for screens wider than 600px?

medium

A. @media screen and (min-width: 600px) { body { font-size: 1.2rem; } }

B. @media (min-width: 600px) { body { font-size: 12; } }

C. @media screen (min-width: 600px) { body { font-size: 1.2rem; } }

D. @media (min-width: 600) { body { font-size: 1.2rem; } }

Solution

1. Step 1: Understand media query syntax

   Future CSS uses standard CSS media queries. The correct syntax includes the media type, e.g., screen and (min-width: 600px).

2. Step 2: Check font size units

   Using 1.2rem is better for accessibility and scaling than fixed pixels.

3. Final Answer:

   @media screen and (min-width: 600px) { body { font-size: 1.2rem; } } -> Option A

4. Quick Check:

   Media query with screen and rem units [OK]

Hint: Always include media type and use rem units for fonts [OK]

Common Mistakes:

• Omitting 'and' after media type 'screen'
• Using px instead of rem for font size
• Missing 'px' unit in media query