На какие файлы Вы делите less/sass?

Question

[unlik]

Ребят, только знакомлюсь с препроцессорами. Поэтому интересно из каких файлов у Вас состоит less/sass? Как организована структура?

Понимаю, что каждому удобно свое. Но все же...

Comments

[Сергей delphinpro]

Отдельный файл на каждый блок.

например:

[unlik]

Сергей delphinpro, примерно так и представлял себе. Единственное вопросы, что в init и _sr_only?

[Сергей delphinpro]

unlik,
в инит всякое общее

spoiler

:root {
}

html {
  font-size: 100%;
  line-height: (4/3);
}

body {
  min-height: 100vh;
  font-size: rem($font-size-base);
  font-family: $font-family-base;
}

.container {
  @include make-container();
  @include make-container-max-widths();
}

.row {
  @include make-row();
}

sr-only - это из бутстрапа

[unlik]

Сергей delphinpro, спасибо

[Rustam Bainazarov]

Я вот этой структуре следую, но с доработками:
https://itnext.io/structuring-your-sass-projects-c...

Достаточно популярная штука — «The 7–1 Pattern».

Answer 1

[VegasChickiChicki]

Вопрос вроде бы не вопрос, но вот как делаю я(я ленивый, так наверное лучше не делать, но все же):
1) Файл стилей, главный, сюда мы подключаем все остальные стили и пишем стили основной страницы\страниц
1.1) Если страницы большие, лучше сделать для каждой отдельный файл стилей и подключать в основной
2)Файл меди запросов, тут я думаю понятно :)
3) Файл миксинов и общих классов.(общие классы - что вроде кнопки, которая встречается 10 раз на странице подряд или что-то вроде того :)) Цвета общие в переменные, тоже тут. И прочие мелкие вещи, которые не хочется оставлять в главном файле стилей.
--------------------
P.S. Я слышал, что некоторые разбивают файлы стилей на много много файлов, чуть ли не по секциям, по типу:
header.sass footer.sass aside.sass и т.д. Но я ленивый и по этому в крайнем случае делю на разные страницы, если уж много прям стилей.

Comments

[unlik]

Вот я просто делал длинный лендинг. И основной файл стал таким большим, что не удобно в нем искать. Поэтому решил начать разбивать по блокам)

[VegasChickiChicki]

unlik, Ну это тоже нормально, кому как удобно, я лично при отладке вижу сразу строчку на которой стили конкретного блока, если конечно в сборке настроена карта стилей.

Answer 2

[Валерий]

Я делаю так:
главный app.scss и файл настроек settings.scss (здесь глобальные переменные, типа размер шрифта, цветовая схема etc.) в корне каталога scss;
здесь же несколько каталогов - vendors (для всевозможных дополнений + reset или normalize), components (миксины, классы...), partials (для страниц типа 404, отдельных страниц или их элементов).

Структура совсем не обязательная: от проекта к проекту может очень сильно отличаться как количеством файлов/каталогов, так и "разбивкой" на страницы/элементы_страниц. Сейчас, к примеру, делаю сайт на ВП. Там дерево пока выглядит так:

$ tree
.
├── app.scss
├── components
│   ├── _classes.scss
│   ├── _components.scss
│   ├── _mixins.scss
│   └── _typography.scss
├── partials
│   ├── _404.scss
│   ├── _global.scss
│   ├── _index.scss
│   ├── _partials.scss
│   ├── _posts.scss
│   ├── _skip.scss
│   └── _woo.scss
├── _settings.scss
└── vendors
    ├── _reset.scss
    └── _vendors.scss

3 directories, 15 files

Это только начало. В дереве есть файл woo.scss: там пока общая "обертка", просто до оформления магазина пока не добрался. Типография вынесена в файл _typography.scss отдельно потому, что там всякие вертикальные ритмы, золотые сечения...
Как-то так :)