🥓 School Landing Page Project – Section 1: Sass Setup

💡 What is Sass?

Sass (Syntactically Awesome Stylesheets) is an extension of CSS that helps you write styles more efficiently and in a more structured way.

Simply put, it’s a tool that makes CSS easier to maintain and more readable by reducing repetition and adding powerful features.

Sass has two syntaxes, and for this project, I’ll be using SCSS syntax, which is almost identical to regular CSS.

(It keeps the curly braces and semicolons, making it very familiar.)

❓ Why use Sass?

While this project can technically be built with plain HTML and CSS, I’ve chosen to use Sass for the following reasons:

1. ✅ Reuse styles with variables

By defining values like colors, font sizes, and spacing using Sass variables, I can easily manage and update styles throughout the project.

$main-color: #03A6A1; $accent-color: #F9A825; $font-base: 'Inter', sans-serif; 

2. 🧩 Write cleaner code with nesting

Since HTML is naturally nested, using Sass nesting makes it easier to write styles that reflect the structure of the page.

This is especially helpful when working with components.

.navbar { ul { list-style: none; } li { display: inline-block; } a { text-decoration: none; color: $main-color; } } 

3. 📱 Responsive design with mixins

As this landing page is targeting mobile users, responsive design is crucial.

Instead of writing repetitive media queries, I’ll use @mixin to create reusable, clean breakpoints.

@mixin respond($breakpoint) { @if $breakpoint == mobile { @media (max-width: 600px) { @content; } } } // Example usage .container { width: 100%; padding: 2rem; @include respond(mobile) { padding: 1rem; } } 

Using these features will help me write CSS in a more organized and scalable way —

that’s why I decided to use Sass for this project.

🗂️ Creating the Project Folder & Initializing npm

Now that we’ve decided to use Sass, let’s start by creating the project folder and initializing it with npm.

1. 📁 Create the Project Folder

Open your terminal and run the following commands to create and navigate into your project folder:

mkdir css_school-landing_project cd css_school-landing_project 

2. 📦 Initialize the Project with npm

We’ll use npm to manage packages like Sass. First, let’s initialize the project with a package.json file using the command:

npm init -y 

The -y flag accepts all default values, quickly generating a basic package.json file.

📸 Before npm init	📦 After npm init

This comparison shows how running npm init -y creates the package.json file needed to manage your project’s dependencies.

In the next step, we’ll install Sass as a development dependency and begin setting up the folder and file structure.

3. 📥 Installing Sass with npm

Now that the project is initialized, let's install Sass.

We'll use the officially recommended Dart Sass (node-sass is deprecated and no longer recommended).

Open your terminal and run:

npm install sass --save-dev 

✅ Why use the --save-dev flag?

Sass is a development tool — it’s only needed while building the project, not during production.

That’s why we install it as a development dependency using --save-dev.

After running the command, it will be listed in your package.json like this:

"devDependencies": { "sass": "^1.89.2" } 

📦 Files and folders created

After installing Sass, you’ll notice these new items:

• node_modules/ – contains Sass and its dependencies
• package-lock.json – tracks exact versions of all installed packages
• package.json – now includes "sass" under devDependencies

📌 Note

The node_modules/ folder is large and can always be regenerated, so you should never upload it to GitHub.

If you're working on a different computer, simply run:

npm install 

This will install all dependencies based on your package.json.

🔜 Next: Folder Structure & Sass File Setup

Now that Sass is installed, it’s time to organize the project structure and set up the base Sass files.

In the next step, we’ll:

• Create src/ and dist/ folders
• Add a scss/ folder with Sass partials (_variables.scss, main.scss, etc.)
• Write npm scripts to automatically compile Sass into CSS

👉 Let’s get started with folder setup!