OnlineCBT
Compile authoring syntax into browser CSS
Sass is a stylesheet preprocessor. SCSS is its CSS-like syntax. Browsers consume the compiled CSS, not an .scss source file. Use preprocessing for clear reuse and organization, while keeping the generated output understandable.
// styles.scss
$brand: #1d4ed8;
@mixin focus-ring {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
.button {
background: $brand;
color: white;
&:focus-visible { @include focus-ring; }
}
The variable is resolved during compilation. The ampersand refers to the current parent selector, producing .button:focus-visible. A mixin includes reusable declarations at each invocation; it does not create a runtime function.
Build workflow
With Sass installed through the project's approved tooling, compile using a command such as sass styles.scss styles.css, then link styles.css in HTML. Watch mode can rebuild on edits. Keep generated files and source maps organized according to the existing project's build setup.
Modules and nesting
Modern Sass modules use @use and @forward. Do not start a new module system around the older @import pattern without checking the current official guidance. Keep nesting shallow: deeply nested selectors tightly couple styles to wrapper structure and increase specificity.
Sass variables versus custom properties
A Sass variable is resolved at build time. A CSS custom property remains in the browser and participates in runtime cascade and theming. Use custom properties for per-component or theme values that must change without recompilation; preprocessing and native CSS can work together.
Practice
- Compile the sample and inspect the resulting plain CSS.
- Change $brand and rebuild; the browser changes only after the generated stylesheet changes.
- Extract a focus-ring mixin and use it on a button and input.
- Replace a deeply nested selector with a component class and compare the generated specificity.
Reference: official Sass guide.
