SASSmarkup~30 mins

Setting up SASS (npm, dart-sass) - Try It Yourself

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Setting up SASS with npm and dart-sass

📖 Scenario: You want to use SASS to write better CSS for your website. SASS helps you write styles faster and cleaner. To start, you need to set up SASS on your computer using npm and the dart-sass package.

🎯 Goal: Set up a new project folder with npm, install dart-sass, and create a simple SASS file that compiles to CSS.

📋 What You'll Learn

Initialize a new npm project with npm init -y

Install sass package using npm

Create a styles.scss file with some SASS code

Add a script in package.json to compile SASS to CSS

💡 Why This Matters

🌍 Real World

Web developers use SASS to write cleaner and more maintainable CSS for websites and apps.

💼 Career

Knowing how to set up and use SASS is a common skill required for front-end developer roles.

Progress0 / 4 steps

Initialize npm project

Open your terminal and run npm init -y to create a package.json file in your project folder.

SASS

# Initialize your npm project here
# Your command here

Need a hint?

This command creates a default package.json file which is needed to manage your project packages.

Install dart-sass package

Run npm install sass in your terminal to add the dart-sass package to your project.

SASS

# Run the command npm install sass in your terminal

Need a hint?

This installs the SASS compiler so you can convert your .scss files to .css.

Create a styles.scss file

Create a file named styles.scss and write this SASS code inside it:

$primary-color: #3498db;
body {
  background-color: $primary-color;
}

SASS

# Create styles.scss file and add SASS code
// Your code here

Need a hint?

This SASS code sets a color variable and uses it as the background color for the page.

Add npm script to compile SASS

Open package.json and add this line inside the "scripts" section:
"sass": "sass styles.scss styles.css --no-source-map"

SASS

# Add the sass script inside package.json scripts section
// Your code here

Need a hint?

This script lets you run npm run sass to compile your SASS file into CSS.