@unlik

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

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

Понимаю, что каждому удобно свое. Но все же...
  • Вопрос задан
  • 212 просмотров
Пригласить эксперта
Ответы на вопрос 2
@VegasChickiChicki
Вопрос вроде бы не вопрос, но вот как делаю я(я ленивый, так наверное лучше не делать, но все же):
1) Файл стилей, главный, сюда мы подключаем все остальные стили и пишем стили основной страницы\страниц
1.1) Если страницы большие, лучше сделать для каждой отдельный файл стилей и подключать в основной
2)Файл меди запросов, тут я думаю понятно :)
3) Файл миксинов и общих классов.(общие классы - что вроде кнопки, которая встречается 10 раз на странице подряд или что-то вроде того :)) Цвета общие в переменные, тоже тут. И прочие мелкие вещи, которые не хочется оставлять в главном файле стилей.
--------------------
P.S. Я слышал, что некоторые разбивают файлы стилей на много много файлов, чуть ли не по секциям, по типу:
header.sass footer.sass aside.sass и т.д. Но я ленивый и по этому в крайнем случае делю на разные страницы, если уж много прям стилей.
Ответ написан
@Val_Ery_1
Я делаю так:
главный 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 отдельно потому, что там всякие вертикальные ритмы, золотые сечения...
Как-то так :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы