Getting Started With Syntactically Awesome Stylesheets (Sass)

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that makes styling faster, smarter, and easier. But browsers don’t understand .scss files directly — they only understand .css.

That’s why we use an auto compiler: it watches your Sass files and automatically generates CSS whenever you save changes.

Learn Software development

1. Install Sass

Open your terminal and install Sass globally:

npm install -g sass

Check the installation:

sass --version

You should see a version number (e.g. 1.77.0).

2. Create Your Project Structure

Inside your project folder, create this layout:

project/
 ├─ index.html
 ├─ scss/
 │   └─ main.scss
 └─ css/
     └─ main.css   ← will be auto-generated

3. Add Some Sass

In scss/main.scss:

$bg: #145AE6;
$text: #fff;

body {
  background: $bg;
  color: $text;

  h1 {
    font-size: 2.5rem;
    margin: 0;
  }
}

4. Start the Auto Compiler

Run this in your terminal (from your project folder):

sass --watch scss/main.scss css/main.css

• scss/main.scss → source file
• css/main.css → output file

Now, whenever you save main.scss, Sass will automatically recompile the CSS.

5. Link CSS in HTML

In index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass Auto Compile Demo</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <h1>Hello Sass!</h1>
</body>
</html>

6. Test It

1. Save your .scss file.
2. Sass generates main.css automatically.
3. Refresh your browser → you’ll see your styles applied.

7. (Optional) Use npm Scripts for Shortcuts

Instead of typing the long command each time, you can add it as an npm script:

1. Run:npm init -y npm install sass --save-dev
2. In package.json, add:"scripts": { "sass": "sass --watch scss:css" }
3. Run it with:npm run sass

This will watch all .scss files inside /scss and compile them into /css.

✅ You’re Ready!

Now you can:

• Write cleaner styles with variables, nesting, and mixins.
• Let the auto compiler handle CSS generation in the background.
• Scale up easily with partials (_variables.scss, _mixins.scss) and imports.