Step-by-step Tutorial: Setting up a Sass Project from Scratch

by

Setting up a Sass project from scratch can seem daunting at first, but with a step-by-step approach, it becomes manageable and efficient. Sass, or Syntactically Awesome Stylesheets, is a powerful CSS preprocessor that extends CSS with variables, nested rules, mixins, and more. This tutorial will guide you through creating a basic Sass project from the ground up.

Prerequisites

  • Node.js installed on your computer
  • A code editor like Visual Studio Code
  • Basic knowledge of CSS

Step 1: Initialize Your Project

Create a new folder for your project. Open your terminal or command prompt, navigate to this folder, and run:

npm init -y

This creates a package.json file, managing your project dependencies.

Step 2: Install Sass

Install Sass via npm by running:

npm install sass --save-dev

This adds Sass to your development dependencies.

Step 3: Create Your Sass Files

Make a new folder called src inside your project directory. Inside src, create a file named style.scss.

In style.scss, add some basic styles and variables:

/* style.scss */ 
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: #fff;
}

h1 {
  color: darken($primary-color, 10%);
}

Step 4: Compile Sass to CSS

In your package.json, add a script to compile Sass:

"scripts": {
  "build-css": "sass src/style.scss dist/style.css"
}

Run the command in your terminal:

npm run build-css

This generates a style.css file inside a dist folder.

Create an index.html file in your project root and link the generated CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass Project</title>
  <link rel="stylesheet" href="dist/style.css">
</head>
<body>
  <h1>Hello, Sass!</h1>
</body>
</html>

Step 6: Automate Rebuilding

For continuous development, run Sass in watch mode:

npm set-script watch "sass --watch src/style.scss:dist/style.css"

Start watching for changes with:

npm run watch

Now, any changes you make to style.scss will automatically update your CSS file.

Conclusion

With these steps, you’ve set up a basic Sass project from scratch. You can now extend your styles, use variables, mixins, and more to develop a maintainable and scalable stylesheet system for your website.