Future CSS features replacing SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What CSS feature can replace SASS variables?

CSS Custom Properties (also called CSS variables) allow you to store values and reuse them throughout your CSS, similar to SASS variables.

intermediate

How does CSS nesting compare to SASS nesting?

CSS nesting lets you write selectors inside other selectors, just like SASS nesting, making styles easier to read and maintain without extra tools.

intermediate

What is the CSS @layer rule and how does it relate to SASS?

@layer helps organize and control the order of CSS rules, similar to how SASS partials and imports manage style order.

advanced

Can CSS replace SASS mixins? If yes, how?

Yes, CSS @custom-media and @property rules, combined with functions and variables, can replace some mixin uses by reusing styles and logic.

beginner

Why might developers still use SASS even with new CSS features?

SASS offers powerful features like loops, conditionals, and functions that CSS does not fully support yet, so some projects still benefit from SASS.

Which CSS feature allows you to reuse values like SASS variables?

A CSS Grid

B @import rule

C CSS Animations

D CSS Custom Properties

CSS Custom Properties let you define reusable values, similar to SASS variables.

What does CSS nesting allow you to do?

A Write selectors inside other selectors

B Create animations

C Import external stylesheets

D Define font styles

CSS nesting lets you write selectors inside other selectors, improving readability.

Which CSS rule helps control the order of styles like SASS imports?

A @layer

B @media

C @font-face

D @keyframes

@layer organizes CSS rules and controls their order.

Can CSS fully replace SASS mixins today?

A Yes, CSS has all mixin features

B Only with JavaScript

C No, CSS lacks some features like loops and conditionals

D Only in older browsers

CSS does not yet support loops and conditionals, so it cannot fully replace SASS mixins.

Why do some developers still prefer SASS?

A Because CSS is not supported in browsers

B Because it supports advanced logic like loops and conditionals

C Because SASS is faster to load

D Because SASS uses less memory

SASS supports advanced programming features that CSS currently lacks.

Explain how CSS custom properties can replace SASS variables and give an example.

Think about how you store and reuse colors or sizes in CSS.

Describe the benefits of CSS nesting and how it compares to SASS nesting.

Consider how nesting helps organize selectors.

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