Installing SASS & Setting Up Your Environment

Installing SASS & Setting Up Your Environment

Now that you understand what SASS is and why it's valuable, it's time to get hands-on! In this lesson, we'll walk through everything you need to install SASS, set up your development environment, and compile your first SCSS file to CSS.

Understanding Dart Sass: The Official Implementation

Before we install anything, let's clarify which version of SASS we're installing. As mentioned in the previous lesson, Dart Sass is the official, primary implementation of SASS maintained by the core team. It replaced Ruby Sass (deprecated in 2020) and is faster, more maintainable, and fully up-to-date with the latest SASS features.

Method 1: Installing SASS via npm (Recommended)

The most common and recommended way to install Dart Sass is through npm (Node Package Manager). This method works on Windows, macOS, and Linux.

Prerequisites

You'll need Node.js and npm installed on your system. Check if you have them:

node --version
npm --version

If these commands return version numbers (like v18.16.0 for Node and 9.5.1 for npm), you're ready to proceed. If not, download and install Node.js from nodejs.org - npm comes bundled with it.

Global Installation

To install SASS globally (available for all projects on your system):

npm install -g sass

After installation completes, verify it worked:

sass --version

You should see something like: 1.69.5 compiled with dart2js 3.2.3

Project-Specific Installation (Best Practice)

For real projects, install SASS as a development dependency in your project:

# Navigate to your project directory
cd my-project

# Initialize npm if you haven't already
npm init -y

# Install SASS as a dev dependency
npm install --save-dev sass

This creates a node_modules folder and adds SASS to your package.json file under devDependencies. Now anyone who clones your project can install all dependencies (including SASS) with a simple npm install.

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

Method 2: Standalone CLI Installation

If you don't want to use npm, you can download the standalone Dart Sass executable directly:

1. Visit the official GitHub releases page: github.com/sass/dart-sass/releases
2. Download the appropriate version for your operating system (Windows, macOS, or Linux)
3. Extract the archive
4. Add the sass executable to your system PATH

Setting Up VS Code for SASS Development

Visual Studio Code is the most popular editor for web development, and it has excellent SASS support through extensions. Let's set it up for the best SASS experience.

Essential VS Code Extensions

1. Live Sass Compiler

This extension automatically compiles your SCSS files to CSS as you save them. It's incredibly convenient during development.

• Open VS Code
• Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
• Search for "Live Sass Compiler" by Glenn Marks
• Click Install

Once installed, you'll see a "Watch Sass" button in the VS Code status bar. Clicking it will start watching your SCSS files for changes.

2. SCSS IntelliSense

This extension provides autocompletion, syntax highlighting, and code navigation for SCSS.

• Search for "SCSS IntelliSense" by mrmlnc
• Click Install

3. SCSS Formatter

Automatically formats your SCSS code for consistency.

• Search for "SCSS Formatter" by Sibiraj
• Click Install

Your First SASS Compilation: The Command Line

Let's compile your first SCSS file using the command line. This teaches you the fundamentals before relying on automated tools.

Creating a Simple SCSS File

Create a new folder for your SASS project and add a file called styles.scss:

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;
  padding: 20px;

  h1 {
    font-size: 32px;
    margin-bottom: 10px;
  }
}

Compiling to CSS

Now let's compile this SCSS file to CSS using the command line:

sass styles.scss styles.css

This command tells SASS: "Take styles.scss as input and output styles.css."

After running this command, you'll see a new styles.css file created:

body {
  font-family: Arial, sans-serif;
  background-color: #3498db;
  color: white;
  padding: 20px;
}
body h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

Notice how the variable was replaced with its value, and the nested h1 was compiled to body h1. That's SASS in action!

Watch Mode: Automatic Compilation

Manually running the compile command after every change is tedious. That's where watch mode comes in - SASS will automatically detect file changes and recompile.

sass --watch styles.scss:styles.css

Now SASS is watching styles.scss. Every time you save changes to that file, SASS automatically regenerates styles.css. You'll see output like:

Sass is watching for changes. Press Ctrl-C to stop.

Compiled styles.scss to styles.css.

To stop watching, press Ctrl+C in the terminal.

Watching Entire Directories

In real projects, you'll have multiple SCSS files. Instead of watching them individually, watch entire directories:

sass --watch scss/:css/

This tells SASS: "Watch all files in the scss/ folder and output compiled CSS to the css/ folder, maintaining the same folder structure."

For example:

• scss/main.scss → css/main.css
• scss/components/button.scss → css/components/button.css

Output Styles: Expanded vs Compressed

SASS can output CSS in different formats depending on your needs. The two main styles are "expanded" (human-readable) and "compressed" (minified for production).

Expanded Style (Default)

The expanded style is the default. It produces readable, well-formatted CSS:

.button {
  background-color: #3498db;
  padding: 10px 20px;
  border: none;
}

.button:hover {
  background-color: #2980b9;
}

Compressed Style (Production)

Compressed style removes whitespace, comments, and unnecessary characters to minimize file size:

.button{background-color:#3498db;padding:10px 20px;border:none}.button:hover{background-color:#2980b9}

To compile in compressed style:

sass --style=compressed styles.scss styles.min.css

Source Maps: Debugging Compiled CSS

When your SCSS is compiled to CSS, the browser only sees the CSS file. If you inspect an element in DevTools, you'll see CSS line numbers, not the original SCSS line numbers. This makes debugging difficult.

Source maps solve this problem. They map the compiled CSS back to the original SCSS files, so DevTools shows you the SCSS filename and line number.

Source Maps Are Generated by Default

When you compile SCSS, SASS automatically generates a .map file:

sass styles.scss styles.css

# This creates:
# - styles.css
# - styles.css.map

The CSS file includes a comment pointing to the source map:

/* CSS content here */

/*# sourceMappingURL=styles.css.map */

Disabling Source Maps

If you don't want source maps (e.g., in production), use the --no-source-map flag:

sass --no-source-map styles.scss styles.css

Organizing Your SASS Project Structure

As your project grows, organization becomes critical. Here's a recommended folder structure for SASS projects:

my-project/
├── scss/
│   ├── base/
│   │   ├── _reset.scss
│   │   ├── _typography.scss
│   │   └── _variables.scss
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   └── _navbar.scss
│   ├── layout/
│   │   ├── _header.scss
│   │   ├── _footer.scss
│   │   └── _grid.scss
│   ├── pages/
│   │   ├── _home.scss
│   │   └── _about.scss
│   └── main.scss
├── css/
│   └── main.css (generated)
└── index.html

The main.scss file imports all the partials (files starting with _):

// Base
@import 'base/variables';
@import 'base/reset';
@import 'base/typography';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';

// Components
@import 'components/buttons';
@import 'components/cards';
@import 'components/navbar';

// Pages
@import 'pages/home';
@import 'pages/about';

Adding SASS Scripts to package.json

If you installed SASS via npm, add convenient scripts to your package.json:

{
  "name": "my-project",
  "scripts": {
    "sass": "sass scss/main.scss css/main.css",
    "sass:watch": "sass --watch scss/:css/",
    "sass:build": "sass --style=compressed --no-source-map scss/main.scss css/main.min.css"
  },
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

Now you can run:

• npm run sass - Compile once
• npm run sass:watch - Watch for changes
• npm run sass:build - Build optimized production CSS

Common Installation Issues and Solutions

Issue 1: "sass: command not found"

Solution: If you installed globally, make sure npm's global bin folder is in your PATH. Run npm config get prefix to find it, then add [prefix]/bin to your PATH.

Issue 2: Permission Errors on Global Install

Solution: On macOS/Linux, you might need sudo: sudo npm install -g sass. Better yet, configure npm to use a directory you own without sudo.

Issue 3: Old node-sass Instead of Dart Sass

Solution: Make sure you're installing the sass package, NOT node-sass. The latter is deprecated.

# Correct
npm install sass

# Incorrect (deprecated)
npm install node-sass

Conclusion

You now have SASS installed and understand multiple ways to compile SCSS to CSS! You know how to use watch mode for automatic compilation, how to choose output styles, and how to organize your SASS projects professionally.

In the next lesson, we'll dive into SCSS syntax fundamentals and write more complex stylesheets that showcase SASS's power.