Future CSS features replacing SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Nesting vs SASS Nesting

Which of the following CSS snippets correctly uses the new CSS nesting feature to replicate the SASS nesting below?

.menu {
  color: black;
  .item {
    color: red;
  }
}

A

.menu {
  color: black;
  & .item {
    color: red;
  }
}

B

.menu {
  color: black;
  .item {
    color: red;
  }
}

C

.menu {
  color: black;
  & > .item {
    color: red;
  }
}

D

.menu {
  color: black;
  &.item {
    color: red;
  }
}

💡 Hint

Remember that CSS nesting uses the & symbol to refer to the parent selector.

In CSS nesting, the & symbol represents the parent selector. Option A correctly nests .item inside .menu by using '& .item'. Option A is invalid CSS nesting syntax. Option A uses a child combinator which changes the meaning. Option A concatenates selectors which is incorrect here.

📝 Syntax

intermediate

Using CSS Variables with calc() instead of SASS variables

Given the SASS code below, which CSS code correctly uses CSS custom properties and calc() to achieve the same dynamic spacing?

$base-spacing: 1rem;
.container {
  padding: $base-spacing * 2;
}

A

.container {
  padding: calc(1rem * 2);
}

B

:root {
  --base-spacing: 1rem;
}
.container {
  padding: var(--base-spacing) * 2;
}

C

:root {
  --base-spacing: 1rem;
}
.container {
  padding: calc(var(--base-spacing) * 2);
}

D

.container {
  padding: 2rem;
}

💡 Hint

CSS variables require var() and calc() for arithmetic.

Option C correctly defines a CSS variable and uses calc() with var() to multiply the value. Option C is invalid because CSS does not allow direct multiplication without calc(). Option C hardcodes the value but does not use variables. Option C hardcodes the value without variables or calculation.

❓ selector

advanced

Which CSS selector replicates SASS @at-root behavior?

SASS's @at-root allows styles to be placed outside the current nesting. Which CSS selector technique can replicate this behavior in future CSS?

Consider this SASS:

.card {
  &__title {
    @at-root {
      .highlight {
        color: blue;
      }
    }
  }
}

A

.card__title:has(.highlight) {
  color: blue;
}

B

.card__title .highlight {
  color: blue;
}

C

:is(.card__title) :where(.highlight) {
  color: blue;
}

D

.card__title {}
.highlight {
  color: blue;
}

💡 Hint

Think about how to write styles outside the nested selector.

Option D places .highlight outside the nested .card__title, replicating @at-root behavior. Option D nests .highlight inside .card__title, which is different. Options A and C use pseudo-classes that do not replicate @at-root.

❓ layout

advanced

Replacing SASS Mixins with CSS @layer and Custom Properties

SASS mixins allow reusable style blocks. Which CSS feature below best replaces mixins for managing reusable styles with layering and variables?

Choose the CSS code that uses @layer and custom properties to create a reusable button style.

A

@mixin btn-style {
  padding: 1rem;
  background: blue;
  color: white;
}
.btn {
  @include btn-style;
}
.btn-primary {
  background: green;
}

B

@layer buttons {
  .btn {
    padding: var(--btn-padding, 1rem);
    background: var(--btn-bg, blue);
    color: white;
  }
}

.btn-primary {
  --btn-bg: green;
}

C

.btn {
  padding: 1rem;
  background: blue;
  color: white;
}
.btn-primary {
  background: green;
}

D

.btn {
  @apply padding: 1rem; background: blue; color: white;
}
.btn-primary {
  background: green;
}

💡 Hint

Look for CSS features that support layering and variables for reuse.

Option B uses @layer to organize styles and custom properties for flexible reuse, replacing mixins. Option B uses invalid @apply syntax not supported in standard CSS. Option B is SASS code, not CSS. Option B hardcodes styles without reuse or layering.

❓ accessibility

expert

Ensuring Accessibility with Future CSS Features Replacing SASS

When replacing SASS color functions like darken() with CSS custom properties and color-mix(), which option ensures the best accessibility by maintaining sufficient contrast for text on backgrounds?

Assume --primary-color is a blue shade.

A color: color-mix(in srgb, var(--primary-color) 80%, black 20%);

B color: color-mix(in srgb, var(--primary-color) 20%, black 80%);

C color: var(--primary-color);

D color: darken(var(--primary-color), 20%);

💡 Hint

Higher percentage of primary color keeps the color lighter and more readable.

Option A mixes 80% primary color with 20% black, producing a slightly darker color that maintains good contrast. Option A is mostly black, which may be too dark or not match design. Option A uses the original color without adjustment. Option A uses SASS function which is not valid CSS.