SCSS Starter Files

These are starter files for installing Sass to your project.

Installation ⚙️

1. From the repo, click the green "Code" button dropdown, and select download .zip

2. Paste all of the contents of scss-starter folder into your project

3. If You Already Have a package.json in Your Project:

• Use your original package.json and .gitignore
• Run npm install node-sass dependency
• Copy the following line in the "scripts" section in package.json

"sass": "node-sass styles/scss/main.scss -w styles/css/style.css"

3. If You Don't Have a package.json in Your Project:

• Run npm i to install node-sass dependency

4. Run npm run sass in the terminal

5. Open html/index.html in the browser and view colored fonts

6. Change a variable such as a color and save the file

7. Notice if scss compiled successfully

8. Refresh the html and verify it changes

9. Delete html directory

10. Import styles/css/style.css into your main project file

Customization 🎨

• Update and add variables to /abstract/_variables.scss
• Any newly added .scss files should be imported into main.scss

Directory Tree 🌳

├─ styles/
│  ├─ sass/
│  │  ├─ abstract/
│  │  │  ├─ _variables.scss
│  │  │  ├─ _mixins.scss
│  │  │  ├─ _animations_.scss
│  │  │  ├─ _mediaqueries_.scss
│  │  ├─ base/
│  │  │  ├─ _base.scss
│  │  │  ├─ _typography.scss
│  │  ├─ layout/
│  │  │  ├─ _header.scss
│  │  │  ├─ _footer.scss
│  │  ├─ components/
│  │  ├─ pages/
│  │  │  ├─ _home.scss
│  │  ├─ main.scss
│  ├─ css/
│  │  ├─ style.css

---

Contact 📞

Darian Nocera

Email: hello@dariannocera.com

---

Copyright © 2020 Darian Nocera