Web design · Development · SEO
Sass / SCSS
Sass and SCSS explained: from source to CSS | scinet
Editorially reviewed ·
Clear definition
Sass is a language for preparing CSS. You write styles with additional features such as variables, mixins and modules. A compiler then translates that source into CSS the browser can use.
SCSS is the CSS-like Sass syntax with braces and semicolons. An indentation-based Sass syntax also exists. An SCSS file is therefore not another library: it is source code that needs processing before delivery.
What the extra processing gives you
Imagine several components requiring the same spacing calculation. Sass lets you express shared logic in functions or mixins. Modules help organize those rules across files.
Nesting can make related selectors easier to read. Excessive nesting, however, can create hard-to-follow dependencies. I would occasionally inspect the generated CSS as well. Short source code does not automatically mean a small or maintainable output file.
At a glance
Why @use and @forward matter
@use loads a Sass module and normally exposes its public variables, functions and mixins under a namespace. This makes the origin of values clearer. @forward passes public members of a module through another file, which can provide a shared entry point for several files.
Migrating an older project takes more than blindly replacing keywords. Check module paths, configuration and places that expected global variables. One functioning sample component is a useful first test before changing the entire styling system.
Sass or CSS custom properties?
The tools operate at different times. A Sass variable is processed during compilation. A CSS custom property remains in the stylesheet and is resolved in the browser. Custom properties therefore suit local theme values that vary between sections.
You can combine both: Sass organizes stylesheet generation while custom properties carry selected values into the running interface. Ordinary CSS may already be sufficient for a small website with few rules. What matters is whether the extra build step makes a real task easier and can be maintained reliably.
Related reading: CSS Custom Properties · Bulma · Bootstrap 6 Alpha compared.
Practical code example
A variable before compilation
Original SCSS example. The generated CSS uses 1.5rem for padding; the Sass variable is resolved during compilation.
$card-spacing: 1.5rem;
.service {
padding: $card-spacing;
border: 1px solid #ccc;
}Sources and further reading
- Documentation Sass Basics Sass · Checked
- Documentation @use Sass · Checked
- Documentation @forward Sass · Checked
- Documentation Variables Sass · Checked
