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.
Every application that stores and manages data relies on a set of basic operations known…
PHP remains one of the most widely used server-side programming languages, powering platforms such as…
Danfo.js is an open-source JavaScript library designed for data manipulation, analysis, and machine learning. It provides…
JavaScript's async and await keywords revolutionized asynchronous programming by making asynchronous code look and behave more like synchronous code.…
Pretty Good Privacy (PGP) is one of the most widely used encryption systems for securing emails,…
Database migration is one of the most challenging tasks in software engineering. While both PostgreSQL…