Bird
Raised Fist0
SASSmarkup~5 mins

Future CSS features replacing SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Future CSS features aim to make styling easier without extra tools like SASS. They help write cleaner and faster CSS directly in the browser.

When you want to use variables for colors or sizes without SASS.
When you need to create reusable styles with CSS nesting.
When you want to calculate values directly in CSS.
When you want to organize styles with custom media queries.
When you want to avoid compiling CSS and keep your workflow simple.
Syntax
SASS
:root {
  --main-color: #3498db;
}

.container {
  color: var(--main-color);
  padding: calc(1rem + 10px);
}

@media (min-width: 600px) {
  .container {
    padding: 2rem;
  }
}

.parent {
  & > .child {
    color: red;
  }
}

CSS variables start with -- and are accessed with var(--name).

Nesting is now possible in CSS using the & symbol inside selectors.

Examples
Using CSS variables to store and reuse colors.
SASS
:root {
  --primary-color: #ff6347;
}

button {
  background-color: var(--primary-color);
}
Using calc() to do math inside CSS for spacing.
SASS
.card {
  padding: 1rem;
  margin: calc(2rem / 2);
}
Nesting selectors to style child elements inside a parent.
SASS
.menu {
  & > li {
    list-style: none;
  }
}
Using media queries to make styles responsive.
SASS
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
Sample Program

This example shows how to use CSS variables for colors and spacing, nesting selectors inside .card, calculating padding with calc(), and changing layout with media queries for bigger screens.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Future CSS Features Example</title>
  <style>
    :root {
      --main-bg-color: #f0f8ff;
      --main-text-color: #333;
      --spacing: 1.5rem;
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      font-family: Arial, sans-serif;
      padding: var(--spacing);
    }

    .card {
      background: white;
      border-radius: 0.5rem;
      padding: calc(var(--spacing) / 2);
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      max-width: 300px;
      margin: auto;
    }

    .card > h2 {
      margin-top: 0;
      color: #007acc;
    }

    .card > p {
      line-height: 1.4;
    }

    @media (min-width: 600px) {
      body {
        padding: calc(var(--spacing) * 2);
      }

      .card {
        max-width: 500px;
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Future CSS Features</h2>
    <p>This card uses CSS variables, nesting, calc(), and media queries.</p>
  </div>
</body>
</html>
OutputSuccess
Important Notes

CSS variables can be changed dynamically with JavaScript for interactive themes.

Nesting in CSS is still new and may need browser support checks.

Using native CSS features reduces the need for extra build steps like compiling SASS.

Summary

Future CSS features let you write cleaner styles without extra tools.

Variables, nesting, calc(), and media queries are key features replacing SASS parts.

These features work directly in browsers, making development simpler and faster.

Practice

(1/5)
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