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.
Most image upload systems assume one thing: the user has a stable internet connection. That assumption…
Imagine a user submits a form while their internet connection suddenly disappears. Normally, the request…
Cybercriminals don't always announce their presence. Many compromises are designed to remain unnoticed for weeks…
For years, jQuery was everywhere. If you were building websites in the 2010s, there was a…
Few things halt a developer’s flow faster than seeing the dreaded word: CONFLICT. A Git merge…
Spring Boot is one of the most popular frameworks for building REST APIs in Java.…