SCSS Variables and Compilation

### Steps:

1. **Set up a Project with Yarn:**

First, initialize your project and install the necessary packages using Yarn.

yarn init -y
   yarn add sass

2. **Create an SCSS File with Variables:**

Create a file called `_variables.scss` to define your SCSS variables.

// _variables.scss
   $primary-color: #3498db;
   $secondary-color: #2ecc71;
   $font-stack: 'Helvetica', sans-serif;

3. **Create Additional SCSS Files:**

You can split styles into multiple files and import them into a main file.

**_header.scss**

// _header.scss
   header {
       background-color: $primary-color;
       font-family: $font-stack;
   }

**_footer.scss**

// _footer.scss
   footer {
       background-color: $secondary-color;
       font-family: $font-stack;
   }

4. **Main SCSS File:**

In a `main.scss` file, you can import the partial SCSS files (`_variables.scss`, `_header.scss`, `_footer.scss`).

// main.scss
   @import 'variables';
   @import 'header';
   @import 'footer';

5. **Compile SCSS to CSS using Yarn (Sass):**

Add a script in your `package.json` to compile SCSS to CSS.

In `package.json`:

"scripts": {
       "build:css": "sass --watch scss/main.scss:css/style.css"
   }

This will tell Yarn to watch `main.scss` and compile it to `css/style.css`.

6. **Run the SCSS Compilation:**

Run the following command to compile your SCSS files into CSS:

yarn build:css

This will output your CSS into a `css/style.css` file, which can be linked in your HTML.

### Final Project Structure:

.
├── css
│   └── style.css
├── scss
│   ├── _variables.scss
│   ├── _header.scss
│   ├── _footer.scss
│   └── main.scss
├── package.json
└── yarn.lock

Now your SCSS files are organized with variables, modularized via imports, and compiled into a single CSS file for web use with Yarn.