Understand and Inspect Generated CSS

The compiled stylesheet is the final artifact that the browser evaluates. Reviewing generated CSS is essential when nesting, mixins, loops, interpolation, or selector extension makes the source difficult to translate mentally.

Inspect the output when debugging unexpected selector specificity, duplicated declarations, missing rules, or unexpected media-query placement. Browser developer tools can help map compiled declarations back to source when source maps are available.

Readable expanded output is useful during development. Compressed output can reduce file size for production, although compression does not eliminate unnecessary selectors or repeated declarations.

Treat generated CSS as part of code review. A small change to a mixin can affect many selectors across the application.

Inspect Output in Expanded and Compressed Modes
npx sass --style=expanded src/scss/main.scss public/css/main.css
npx sass --style=compressed src/scss/main.scss public/css/main.min.css
💡 The expanded build produces readable CSS for inspection, while the compressed build removes unnecessary formatting for delivery. Compare both outputs when debugging compilation behavior. Do not assume compressed output is automatically optimal if the source generates redundant selectors or excessive utility classes.
Knowledge Check

Why should developers inspect generated CSS when using complex Sass abstractions?