Production build and common mistakes

During development the CSS should be readable and have source maps. For publishing it should be as small as possible. Sass produces both from the same sources: the --style flag chooses the output format.

Compressed output

By default Sass uses the expanded style — the readable CSS you have seen throughout the course. The compressed style removes spaces, line breaks and the last semicolons:

// styles/main.scss
$primary: #2563eb;
 
.btn {
  color: white;
  background: $primary;
 
  &:hover {
    background: black;
  }
}

npx sass --style=compressed --no-source-map styles/main.scss css/main.css

The whole css/main.css becomes one line:

.btn{color:#fff;background:#2563eb}.btn:hover{background:#000}

Sass also shortened colours: white became #fff. The browser reads this file exactly like the expanded one.

Scripts for both modes

Put both commands into package.json:

{
  "scripts": {
    "dev": "sass --watch styles/main.scss css/main.css",
    "build": "sass --style=compressed --no-source-map styles/main.scss css/main.css"
  }
}

Work with npm run dev; before uploading the site run npm run build. In a Vite project you do not need this: npm run build already compiles and minifies the styles.

Should css/ go into Git?

The compiled CSS can always be recreated from the sources, so usually the css/ folder is added to .gitignore and built on the server or in CI. Commit it only if the hosting cannot run npm run build — for example, plain static hosting without a build step.

Checklist of common mistakes

Mistake	What happens	How to avoid
Linking `main.scss` in HTML	Styles are not applied	Link the compiled `.css`
Editing `css/main.css`	Changes are overwritten	Edit only `styles/`
A partial without `_`	An extra CSS file appears	Start partial names with `_`
No `@use` in a component	`Undefined variable`	Each file loads what it uses
Division with `/`	A deprecation warning	`math.div()`
`@extend` inside `@media`	A compile error	A mixin instead
Deep nesting	Long, fragile selectors	Up to three levels
A loop over everything	A heavy CSS file	Generate only what is used
Sass function on `var()`	A compile error	Calculate before the custom property

Check the size

After the build, look at the file size: ls -l css/main.css on macOS and Linux or the file's properties on Windows. If the CSS suddenly grows after adding a mixin or a loop, look at the expanded output to see what was generated.

Common mistake

Publishing the development build. The expanded CSS with a source map works, but it is larger, and the .map file lets anyone read your original Sass sources. Make npm run build the last step before every upload, and check that no main.css.map is left in the published folder.

Thanks for reading!