https://github.com/darshangaikwad4114/sass-structure-starter
A starter template for structuring Sass projects with Vite ⚡
https://github.com/darshangaikwad4114/sass-structure-starter
sass scss vite
Last synced: about 2 months ago
JSON representation
A starter template for structuring Sass projects with Vite ⚡
- Host: GitHub
- URL: https://github.com/darshangaikwad4114/sass-structure-starter
- Owner: darshangaikwad4114
- Created: 2024-11-30T10:36:23.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-03-20T04:06:19.000Z (2 months ago)
- Last Synced: 2025-04-01T09:07:36.405Z (about 2 months ago)
- Topics: sass, scss, vite
- Language: SCSS
- Homepage:
- Size: 238 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sass Structure Starter
## Tech Stack
- Vite
- Sass
## Description
Sass Structure Starter is a project template designed to help developers quickly set up a well-structured Sass project. It provides a clear folder structure and essential configurations to streamline the development process. This project aims to solve the problem of disorganized stylesheets by promoting a modular and maintainable approach to writing Sass.
## Key Features
- Organized folder structure for Sass files
- Pre-configured with Vite for fast development
- Includes common Sass utilities and mixins
- Easy to extend and customize
## Folder structure
```bash
sass/
├── abstracts/
│ ├── _variables.scss
│ ├── _mixins.scss
│ ├── _functions.scss
│ ├── _placeholders.scss
│ ├── _index.scss
├── base/
│ ├── _root.scss
│ ├── _reset.scss
│ ├── _global.scss
│ ├── _index.scss
├── pages/
│ ├── _home.scss
│ ├── _about.scss
│ ├── _index.scss
├── layouts/
│ ├── _header.scss
│ ├── _footer.scss
│ ├── _grid.scss
│ ├── _index.scss
├── components/
│ ├── _buttons.scss
│ ├── _card.scss
│ ├── _index.scss
├── utilities/
│ ├── _accessibility.scss
│ ├── _helpers.scss
│ ├── _shame.scss
│ ├── _index.scss
├── style.scss
```
## Installation
To set up the project locally, follow these steps:
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd sass-Structure-Starter
```
3. Install the dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
## Usage
Once the project is set up and the development server is running, you can start developing your Sass styles. The project is pre-configured with a modular folder structure to help you organize your stylesheets efficiently. Simply add your styles to the appropriate files and folders within the `sass/` directory.