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.