Compiling to CSS

Turn an .scss file into a .css file with the sass command.

Syntaxsass input.scss output.css

The sass command compiles a source file to CSS. You pass the input file and the output file, separated by a colon.

Output style

Use --style to control the formatting. expanded (the default) is readable; compressed minifies for production.

Source maps

By default Sass writes a .css.map file so browser dev tools can point back to your original .scss lines. Disable it with --no-source-map.

Example

Example · bash
# Compile one file
sass style.scss style.css

# Minified production build, no source map
sass style.scss style.css --style=compressed --no-source-map

# Compile an entire directory (src/ -> css/)
sass src:css

When to use it

  • A developer compiles a single main.scss entry file into main.css once before deploying a static marketing page.
  • A build script compiles an entire scss/ source directory into a public/css/ output directory in one command, preserving the folder structure.
  • A developer passes --style=compressed to produce a minified CSS file suitable for production without a separate minification step.

More examples

Compile one file to CSS

Reads src/main.scss and writes the compiled CSS to dist/main.css in a single command.

Example · bash
sass src/main.scss dist/main.css

Compile with compressed output

Produces a minified, whitespace-free CSS file ready for production by adding the --style=compressed flag.

Example · bash
sass src/main.scss dist/main.min.css --style=compressed

Compile entire source directory

Compiles every .scss file in the scss/ folder into matching .css files in css/ and skips generating source maps.

Example · bash
sass scss/:css/ --style=expanded --no-source-map

Related

sass installsass watch

Discussion

  • Be the first to comment on this lesson.