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.
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 filecss/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
- Save your
.scssfile. - Sass generates
main.cssautomatically. - 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:
- Run:
npm init -y npm install sass --save-dev - In
package.json, add:"scripts": { "sass": "sass --watch scss:css" } - 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.
About the Author
Latest tech news and coding tips.
