Sass Source Maps and Compression

How it works

Compressed CSS reduces formatting bytes; a source map connects generated locations to authored sources for development tools. These are separate choices. A map can expose source paths and, if sourcesContent is included, the source text itself. Decide whether that is appropriate before publishing maps. This lesson uses the same input in expanded and compressed review builds and verifies that a map describes the actual entry.

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 source-maps.scss source-maps.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

source-maps.scss

Download source-maps.scss — save at the shown relative path.

$space: 16px;
.screening-card {
  padding: $space;
  border-radius: 8px;
}

Expected CSS

.screening-card {
  padding: 16px;
  border-radius: 8px;
}

Run npx sass --style=compressed source-maps.scss source-maps.css for compact output. Add --no-source-map when maps are unwanted. Compression does not remove unused selectors or prove a page is fast; browser loading and actual output size still matter. The review checks a real source-map object separately from CSS equivalence.

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