Структура папок типового SASS проекта

Структура папок типового SASS проекта#

project-name/
│
├── src/
│   ├── scss/
│   │   ├── abstracts/
│   │   │   ├── _variables.scss      # Переменные (цвета, шрифты, размеры)
│   │   │   ├── _mixins.scss         # Миксины
│   │   │   ├── _functions.scss      # Функции
│   │   │   └── _placeholders.scss   # Плейсхолдеры для @extend
│   │   │
│   │   ├── base/
│   │   │   ├── _reset.scss          # CSS Reset или Normalize
│   │   │   ├── _typography.scss     # Базовая типографика
│   │   │   ├── _base.scss           # Базовые стили (html, body)
│   │   │   └── _utilities.scss      # Утилитарные классы
│   │   │
│   │   ├── components/
│   │   │   ├── _buttons.scss        # Кнопки
│   │   │   ├── _forms.scss          # Формы
│   │   │   ├── _cards.scss          # Карточки
│   │   │   ├── _modal.scss          # Модальные окна
│   │   │   ├── _navigation.scss     # Навигация
│   │   │   └── _slider.scss         # Слайдеры
│   │   │
│   │   ├── layout/
│   │   │   ├── _header.scss         # Шапка сайта
│   │   │   ├── _footer.scss         # Подвал сайта
│   │   │   ├── _sidebar.scss        # Боковая панель
│   │   │   ├── _grid.scss           # Сеточная система
│   │   │   └── _container.scss      # Контейнеры
│   │   │
│   │   ├── pages/
│   │   │   ├── _home.scss           # Стили главной страницы
│   │   │   ├── _about.scss          # Стили страницы "О нас"
│   │   │   ├── _contact.scss        # Стили страницы контактов
│   │   │   └── _404.scss            # Стили страницы ошибки 404
│   │   │
│   │   ├── themes/
│   │   │   ├── _dark.scss           # Темная тема
│   │   │   └── _light.scss          # Светлая тема
│   │   │
│   │   ├── vendors/
│   │   │   ├── _bootstrap.scss      # Переопределение Bootstrap
│   │   │   ├── _jquery-ui.scss      # Стили jQuery UI
│   │   │   └── _normalize.scss      # Normalize.css
│   │   │
│   │   └── main.scss                # Главный файл, импортирующий все остальные
│   │
│   ├── css/                         # Скомпилированные CSS файлы
│   │   ├── main.css
│   │   └── main.css.map
│   │
│   ├── js/                          # JavaScript файлы
│   │   ├── main.js
│   │   └── modules/
│   │
│   ├── images/                      # Изображения
│   │   ├── icons/
│   │   ├── photos/
│   │   └── backgrounds/
│   │
│   ├── fonts/                       # Шрифты
│   │   ├── font-name.woff2
│   │   └── font-name.woff
│   │
│   └── index.html                   # HTML файлы
│
├── dist/                           # Готовые для продакшена файлы
│   ├── css/
│   ├── js/
│   ├── images/
│   └── fonts/
│
├── node_modules/                   # Зависимости npm
├── package.json                    # Конфигурация npm
├── gulpfile.js                     # Конфигурация Gulp (если используется)
├── webpack.config.js               # Конфигурация Webpack (если используется)
└── README.md                       # Документация проекта

Основные принципы организации:#

1. abstracts/ - Вспомогательные инструменты#

  • Не генерируют CSS код сами по себе

  • Содержат переменные, миксины, функции

2. base/ - Базовые стили#

  • Общие стили для всего проекта

  • Сброс стилей, типографика, базовые элементы

3. components/ - Переиспользуемые компоненты#

  • Небольшие, изолированные части интерфейса

  • Кнопки, формы, карточки

4. layout/ - Макетные блоки#

  • Крупные структурные элементы

  • Шапка, подвал, сетка

5. pages/ - Специфичные стили страниц#

  • Стили, уникальные для конкретных страниц

6. themes/ - Темы оформления#

  • Альтернативные цветовые схемы

7. vendors/ - Сторонние библиотеки#

  • Переопределения внешних CSS библиотек

Пример главного файла main.scss:#

// 1. Abstracts
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

// 2. Base
@import 'base/reset';
@import 'base/typography';
@import 'base/base';

// 3. Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/grid';

// 4. Components
@import 'components/buttons';
@import 'components/forms';
@import 'components/cards';

// 5. Pages
@import 'pages/home';
@import 'pages/about';

// 6. Themes
@import 'themes/dark';

Эта структура основана на методологии 7-1 Pattern и обеспечивает удобную организацию кода, легкость поддержки и масштабируемость проекта.

Contents