Как правильно компилировать SASS через Gulp.js по SASS-гайдлайну?

Question

[Дмитрий Сергеевич]

Всем привет! Ознакомился недавно с SASS гайдлайном , в котором описывается структура хранения файлов:

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Типографские правила
|   ...                  # и т.д.
|
|– components/
|   |– _buttons.scss     # Кнопки
|   |– _carousel.scss    # Карусель
|   |– _cover.scss       # Обложка
|   |– _dropdown.scss    # Выпадающий список
|   ...                  # и т.д.
|
|– layout/
|   |– _navigation.scss  # Навигация
|   |– _grid.scss        # Сетка
|   |– _header.scss      # Шапка
|   |– _footer.scss      # Подвал
|   |– _sidebar.scss     # Боковая панель
|   |– _forms.scss       # Формы
|   ...                  # и т.д.
|
|– pages/
|   |– _home.scss        # Стили, особые для главной страницы
|   |– _contact.scss     # Стили, особые для страницы контактов
|   ...                  # и т.д.
|
|– themes/
|   |– _theme.scss       # Тема по умолчанию
|   |– _admin.scss       # Тема админа
|   ...                  # и т.д.
|
|– utils/
|   |– _variables.scss   # Переменные Sass
|   |– _functions.scss   # Функции Sass
|   |– _mixins.scss      # Примеси Sass
|   |– _helpers.scss     # Помощники классов & placeholder’ов
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # и т.д.
|
|
`– main.scss             # главный файл Sass

У меня сразу возник вопрос, а как же правильно все это компилировать, как такое правильно собрать?? Кто как хранит и компилирует SASS файлы, поделитесь пожалуйста опытом, всем спасибо!

Answer 1

[Андрей Хохлов]

Заинклюдить (import) всё в main.scss и из него собрать css, например с помощью Gulp.

Не очень удобно, что нельзя инклюдить сразу папку (как в stylus), но вполне терпимо.

Примерно так у меня: joxi.ru/8AnBLbgh5oXjAO

Comments

[Дмитрий Сергеевич]

Правильно ли я понял, что если запихнуть в пайп main.scss с одними импортами, то gulp-sass нормально скушает и выплюнет 1 файл с со всеми стилями собранными из папок?

[Андрей Хохлов]

Дмитрий Сергеевич: Да

[Константин Мохов]

Дмитрий Сергеевич: правильно. Можно подключать целиком папки со всем содержимым import "dir/**/*"

[Дмитрий Сергеевич]

Андрей Хохлов: но если я работаю над одним файлом, например главной, то каждый раз он будет пересобирать главный main.css из файлов которые не были изменены, как можно решить эту проблему при использовании данной структуры?

[Дмитрий Сергеевич]

Константин Мохов: спасибо! А такая конструкция будет работать? _*.scss

[Константин Мохов]

Дмитрий Сергеевич: насколько знаю, если файл начинается с нижнего подчеркивания, то он просто используется как компонент и файл .css из него не создается, а если назвать sass файл простым символом - будет создан файл.

А по поводу постоянного пересобирания файла - там кеширование используется.

[Дмитрий Сергеевич]

Константин Мохов: Константин, спасибо! Отпишитесь постом чтобы я мог в карм вам плюс поставить ;)

[Андрей Хохлов]

Константин Мохов: вы вводите в заблуждение, нельзя подключать папку: joxi.ru/YmENR3XSNG0E26 , нельзя использовать маску имени файла: joxi.ru/Drlp5BJfpKVdrP

[Дмитрий Сергеевич]

Андрей Хохлов: он наверное имел в виду gulp.watch('./dev/sass/**/*', ['sass']).on('change', livereload.changed)

[Константин Мохов]

Андрей Хохлов: почему же? Вот пример рабочего проекта joxi.ru/vAW4pRySJxbZrW

[Андрей Хохлов]

Константин Мохов: а чем собираете?

[Константин Мохов]

Андрей Хохлов: у меня довеском стоит на руби компас и sass-globbing - именно он и позволяет так инклюдить. Но сразу оговорочка - из-за использования руби производительность отстаёт немного

[Андрей Хохлов]

Константин Мохов: в том то и дело) lib-sass так не умеет