0
0
SASSmarkup~5 mins

Setting up SASS (npm, dart-sass)

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

SASS helps you write CSS faster and cleaner. Setting it up lets you use its features in your projects.

You want to organize your CSS with variables and nesting.
You need to compile SASS files into regular CSS for browsers.
You want to use modern CSS features before browsers support them.
You are starting a new web project and want easier style management.
Syntax
SASS
npm install -g sass
sass input.scss output.css

npm install -g sass installs the Dart SASS compiler globally on your computer.

sass input.scss output.css compiles your SASS file into a CSS file.

Examples
Installs the SASS compiler globally so you can use it anywhere in your terminal.
SASS
npm install -g sass
Converts styles.scss into styles.css that browsers understand.
SASS
sass styles.scss styles.css
Watches your SASS file and automatically updates CSS when you save changes.
SASS
sass --watch styles.scss:styles.css
Sample Program

This HTML file links to a CSS file generated from SASS. After setting up SASS, you write styles in styles.scss and compile it to styles.css to style this page.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SASS Setup Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Welcome to SASS!</h1>
</body>
</html>
OutputSuccess
Important Notes

Make sure you have Node.js and npm installed before installing SASS.

Use sass --watch during development to save time.

Dart SASS is the main supported version and works on all platforms.

Summary

SASS setup uses npm to install the Dart SASS compiler.

Compile SASS files to CSS with the sass command.

Use --watch to auto-update CSS when SASS changes.