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.
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).
Inside your project folder, create this layout:
project/
├─ index.html
├─ scss/
│ └─ main.scss
└─ css/
└─ main.css ← will be auto-generated
In scss/main.scss:
$bg: #145AE6;
$text: #fff;
body {
background: $bg;
color: $text;
h1 {
font-size: 2.5rem;
margin: 0;
}
}
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 fileNow, whenever you save main.scss, Sass will automatically recompile the CSS.
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>
.scss file.main.css automatically.Instead of typing the long command each time, you can add it as an npm script:
npm init -y npm install sass --save-devpackage.json, add:"scripts": { "sass": "sass --watch scss:css" }npm run sassThis will watch all .scss files inside /scss and compile them into /css.
Now you can:
_variables.scss, _mixins.scss) and imports.Latest tech news and coding tips.
Why borrowing code is a skill—when you understand what you're copying. For years, "copy-paste developer"…
Interactive forms rarely keep every field active all the time. Sometimes an input should only…
A modern JavaScript API for working with dates, times, time zones, and calendars without the…
Understanding What Happens Behind the Scenes Node.js looks simple from the outside—you write JavaScript, call…
The need for absolute certainty is the greatest disease the engineering mind faces. The moment…
The software industry is one of the most competitive places to build a career. Every…