This repository provides a foundational SCSS (Sass) architecture for scalable and maintainable front-end projects. It includes a structured set of folders and files for organizing design tokens, themes, layout rules, and vendor styles. The goal is to help teams quickly bootstrap new projects with a clear separation of concerns, reusable patterns, and best practices for writing modular and consistent SCSS code.

Note: This SCSS architecture was created with reference and inspiration from Sass Guidelines by Hugo Giraudel. The structure and best practices outlined here are heavily influenced by the recommendations in that resource.

The following are some of the key benefits you'll gain by using this SCSS base setup:

• 🚀 Faster Project Setup: Quickly start new projects with a ready-to-use SCSS structure.
• 🧩 Modular Codebase: Organize styles into clear, reusable modules for easy maintenance.
• 🛠️ Easy Customization: Effortlessly adapt themes, tokens, and layouts to project needs.
• 🧹 Consistent Styling: Enforce design consistency across all components and pages.
• 👥 Team Friendly: Simplifies collaboration with clear folder and file conventions.
• 📦 Scalable Architecture: Supports growth from small to large projects without chaos.
• 📚 Best Practices: Encourages clean, maintainable, and future-proof SCSS code.

Clone or download this repository, and then place the folder into your project's working directory.

scss-base/
│
├── abstracts/      # Global settings, functions, mixins, variables, helpers
├── base/           # Base styles, resets, typography
├── components/     # UI components (buttons, cards, forms, etc.)
├── layout/         # Layout-related styles (grid, header, footer)
├── pages/          # Page-specific styles
├── themes/         # Theme definitions (light, dark, custom)
├── tokens/         # Design tokens (colors, spacing, typography scale)
├── vendors/        # Vendor overrides
│
├── main.scss       # Primary entry point
└── README.md       # Project documentation

If you like this project, don’t forget to star the repo ⭐ It helps others discover the project!

Contributions, suggestions, and feedback are always welcome 🙌