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.
Download the Codeflare iOS app and learn on the Go 1. What UI and UX…
1. Running Everything as Root One of the biggest beginner errors. Many new users log…
A keylogger is a type of surveillance software or hardware that records every keystroke made…
In JavaScript, it’s commonly used for: Recursive functions (like Fibonacci) Heavy calculations Repeated API/data processing…
For years, responsive design has depended almost entirely on media queries. We ask questions like: “If…
1. What is Task Scheduling? Task scheduling is the process of automatically running commands, scripts,…