Sass - Installation

Sass - Installation

To use Sass, you need to install a Sass compiler. The primary and recommended implementation is Dart Sass, which is fast, actively maintained, and offers the latest features.

Prerequisites

The most common way to install Dart Sass involves Node.js and npm (Node Package Manager) or Yarn. Make sure you have a recent version of Node.js installed on your system. You can download it from nodejs.org.

Installation Methods

1. Using npm (Recommended)

You can install Sass globally or locally within your project.

Global Installation:

This makes the sass command available anywhere in your terminal.

npm install -g sass

Local (Project) Installation:

This is the preferred method for most projects, as it locks the Sass version to the project and makes collaboration easier. Navigate to your project’s root directory in the terminal.

npm install sass --save-dev

This adds sass to your project’s devDependencies in package.json. You can then run Sass via npm scripts (e.g., "scripts": { "scss": "sass input.scss output.css" }, run with npm run scss) or directly using npx sass ....

2. Standalone Executable

If you don’t want to use Node.js/npm, you can download pre-compiled standalone executables for Windows, macOS, and Linux directly from the Dart Sass GitHub releases page:

https://github.com/sass/dart-sass/releases

Download the archive for your operating system, extract it, and add the directory containing the sass executable to your system’s PATH environment variable so you can run it from any terminal.

3. Using Package Managers (e.g., Homebrew)

If you use package managers like Homebrew (macOS) or Chocolatey (Windows), you can often install Dart Sass through them:

# Using Homebrew (macOS/Linux)
brew install sass/sass/sass

# Using Chocolatey (Windows)
choco install sass

Note: Check the respective package manager’s documentation for the most up-to-date commands.

Verifying Installation

Once installed, open your terminal and run:

sass --version

This should output the installed Dart Sass version (e.g., 1.71.1).

Simple Usage Example

1. Create an HTML file (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello Sass!</h1>
    <p>This paragraph is styled with Sass.</p>
</body>
</html>

2. Create a Sass file (style.scss) in the same directory:

$primary-color: #3498db;
$text-color: #333;

body {
  font-family: sans-serif;
  color: $text-color;
}

h1 {
  color: $primary-color;
}

p {
  font-size: 1.1em;
}

3. Compile the Sass file using the command line:

# Compile once
sass style.scss style.css

# Watch for changes and recompile automatically
sass --watch style.scss:style.css

This will generate a style.css file:

/* style.css (Compiled Output) */
body {
  font-family: sans-serif;
  color: #333;
}

h1 {
  color: #3498db;
}

p {
  font-size: 1.1em;
}

4. Open index.html in your browser. You should see the styles applied.

This covers the basic installation and usage. Sass integrates deeply with modern web development workflows, often being handled by build tools like Webpack, Vite, or Parcel.