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.
A web server is the software responsible for receiving requests from clients, processing those requests,…
A shell prompt is the text displayed by a command-line shell to show that it is ready…
A SOC Analyst (Security Operations Center Analyst) is one of the frontline defenders of an organization’s cybersecurity…
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…