Using Sass

Using Sass (CLI & Build Tools)

Once you have Sass installed (preferably Dart Sass), you can compile your .scss or .sass files into CSS in several ways. The most common methods involve using the Sass command-line interface (CLI) directly or integrating Sass into a modern front-end build process.

1. Using the Sass CLI

The Sass CLI provides a straightforward way to compile files, watch for changes, and control output.

Basic Compilation (Single File):

Compile input.scss into output.css:

sass input.scss output.css

You can also use shorthand if the input and output names (excluding extension) are the same:

sass style.scss style.css

Watching for Changes:

To automatically recompile whenever you save changes to your Sass file(s), use the --watch flag. This is essential during development.

# Watch a single file
sass --watch input.scss:output.css

# Watch all .scss files in a directory ('styles/scss') and output to another ('public/css')
sass --watch styles/scss:public/css

Common CLI Options:

• --style: Sets the output format. Common values: expanded (default, readable) or compressed (minified for production).
• --source-map / --no-source-map: Controls whether source map files (.css.map) are generated. Source maps are crucial for debugging as they link compiled CSS back to the original Sass source. Enabled by default unless --style=compressed.
• --embed-sources: Embeds the original Sass source content directly into the source map (useful in some environments).
• --load-path or -I: Adds a directory to the Sass load path, allowing @use or @import to find files in that directory without relative paths (e.g., -I node_modules).
• --quiet or -q: Suppresses warning messages.
• --stop-on-error: Stops compilation immediately if an error occurs (default behavior).
• --update: Only compiles files that have actually changed (useful for compiling directories).

Example Usage:

# Watch and compile for development with source maps
sass --watch src/scss:dist/css --style=expanded --source-map

# Compile once for production (minified, no source map)
sass src/scss/main.scss dist/css/main.min.css --style=compressed --no-source-map

2. Integrating with Build Tools

In modern web development, Sass compilation is usually handled as part of a larger build process using tools like Vite, Webpack, Parcel, or framework CLIs (like Angular CLI, Create React App).

Vite:

Vite has built-in support for Sass. Simply install Sass as a dev dependency (npm install -D sass) and you can import .scss files directly into your JavaScript/TypeScript modules.

// main.js or component file
import './styles/main.scss';

Webpack:

Requires installing sass and sass-loader. Configure sass-loader in your webpack.config.js file within the module rules section.

// webpack.config.js (simplified)
module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings (or use MiniCssExtractPlugin)
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          {
            loader: 'sass-loader',
            options: {
              // Prefer `dart-sass`
              implementation: require('sass'),
              sassOptions: {
                // outputStyle: 'compressed', // Example option
              },
            },
          },
        ],
      },
    ],
  },
};

Parcel:

Parcel typically supports Sass out-of-the-box if you have sass installed in your project. Just reference your .scss file in your HTML or import it in JS.

Framework CLIs:

Tools like Angular CLI, Create React App (with customization or react-scripts-sass), Next.js, Nuxt.js often have built-in or easily configurable Sass support. Consult their respective documentation.

Using build tools offers advantages like automatic prefixing (with Autoprefixer via PostCSS), CSS extraction into separate files, hot module replacement (HMR), and optimized production builds.

Syntax Selection

The Sass compiler automatically detects the syntax based on the file extension (.scss or .sass). SCSS is the default and most common. While you can force a syntax using options in some environments, it’s standard practice to rely on the file extension.

Character Encodings

Sass follows CSS specifications for character encoding:

• It prioritizes a Unicode Byte Order Mark (BOM) if present.
• Next, it checks for an @charset declaration at the very beginning of the Sass file (e.g., @charset "UTF-8";).
• If neither is present, Sass defaults to UTF-8, which is suitable for almost all use cases.
• Sass automatically adds an @charset declaration to the CSS output if it contains non-ASCII characters.

You rarely need to manually specify @charset unless working with legacy files or non-UTF-8 encodings.