Sass Output Size

How it works

Short Sass can generate a large stylesheet. A nested selector multiplies combinations and a loop emits a rule for every iteration. Review the generated CSS rather than estimating its cost from the number of SCSS lines. The example chooses two useful variants explicitly. In a real project, an output budget should be based on actual application needs and measured alongside caching and loading behaviour.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass output-size.scss output-size.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

output-size.scss

Download output-size.scss — save at the shown relative path.

$sizes: (
  small: 8px,
  large: 24px,
);
@each $name, $space in $sizes {
  .screening-#{$name} {
    padding: $space;
  }
}

Expected CSS

.screening-small {
  padding: 8px;
}
.screening-large {
  padding: 24px;
}

The output contains exactly two component rules. Adding many states to each iteration would increase that count even if the source still looked compact. Count rules or measure compressed bytes in a build check when a shared library grows, and investigate changes rather than silently increasing the limit.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.