Как вы огранизовываете свои sass файлы?

Question

[Владимир]

Доброго времени суток! Хочу спросить у опытных верстальщиков (и не только) как вы организовываете свои sass фалы(если пользуетесь препроцесорами). Вот к примеру у есть есть три разные страницы (Главная, Статьи, Контакты). Я делаю так:
style.sass - Основной стиль где импортятся файлы и глобальные стили
_header.sass - Шапка сайта
_main.sass - Стили на главной странице
_articles.sass - Стили для статей
_contact.sass - Стили для контактов
_footer.sass - Подвал сайта
_media.sass - Все медиа стили
Строго не судите за так сказать разбивку файлов потому как пример. Меня собственно интересует в основном media. Я просто думаю может просто в каждом файле прописывать свои медиа в низу и не делать отдельный файл _media.sass или делать например для 1199px, 991px и т.д., отдельные файлы.
Заранее благодарен за ответы!

Comments

[Hyubert]

на счет медиа у меня пока тоже проблемы, но сасс групирую так

[alvvi]

Когда твой диагноз "React головного мозга":

spoiler

Answer 1

[sergey]

Для sass использую незыблемое правило 7 к 1 sass-7-1-pattern
а касательно media то аналогично подключаю его в эту структуру, делить его и прописывать стили под каждым кустом не вижу смысла, да и удобнее мне как-то отдельным файлом.

Comments

[Hyubert]

Интересная структура, хотелось бы увидеть ее на живом проекте. У Вас есть какие то исходники, которие можете скинуть с использованием этого патерна?

[sergey]

Hyubert: нет сейчас времени, почитайте, ей 100 лет в обед, и используется повсеместно, это же базис sass https://sass-guidelin.es/ru/#section-48 раздел 7 к 1

Answer 2

[Alexander Leonchik]

В своей компании мы используем следующую архитектуру:

assets/
  stylesheets/
    shared/
    admin/
    application/
    vendors/
    admin.scss
    application.scss
    shared.scss

shared.scss

shared.scss - этот файл подгружается везде и содержит все общее, мы указываем что бы он грузил все файлы из shared/*

@import 'shared/*';

А в папке shared может лежать например colors_picker.scss, calendar.scss и т.п. то что используется прям везде

application.scss

application.scss - основной файл проекта, который грузится как дефолтный. Тут мы грузим общий shared + все файлы из папки application

@import 'shared';
@import 'application/*';

В папке application лежат файлы основных страниц, например:

welcome.scss
user.scss
page.scss

Где стили данных страниц. Так же можно там создать папку components и вынести мелкие обьекты туда, например footer, header и т.п. далее подгружать их в основном файле или в файлах страниц

admin.scss

По аналогии c application делаем дальше:
admin.scss - стили админки, тут она может быть просто на бутстрапе поэтому основной файл почти как всегда:

@import 'shared';
@import 'admin/*';
@import 'vendors/bootstrap.scss'

В папке admin/ лежит файл dashboard.scss который и будет рендерится + берем из папки venders bootstrap.

Что касается media

Если у вас они занимают значительное место, можете в папке application создать папку media, туда и класть, далее рендерить, например в application/page.scss.

@import 'media/page_file1.scss';
@import 'media/page_file2.scss';