SCSS/SASS

Summary

A CSS preprocessor adding variables, nesting, mixins and functions to plain CSS, compiled down to regular CSS the browser understands. Preprocessors can improve organization and reuse, although modern CSS now provides many capabilities—such as custom properties, nesting, and functions—that reduce the need for preprocessing.

• 1Convert a plain CSS file to SCSS using nesting and variables. Validate your understanding by applying it in a small practical example.
• 2Write a reusable mixin (e.g. for flex centering) and use it in multiple places. Validate your understanding by applying it in a small practical example.
• 3Learn `@use`/`@forward` for splitting styles into partial files.