How to compile SASS with Gulp.js according to the SASS guideline?

Question

Web development

Hello! I recently got acquainted with the SASS guideline , which describes the file storage structure:

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

I immediately had a question, but how to compile all this correctly, how to assemble it correctly ?? Who stores and compiles SASS files, please share your experience, thank you all!

Answer 1

Include (import) everything in main.scss and collect css from it, for example using Gulp.
It’s not very convenient that you can’t include a folder right away (as in stylus), but it’s quite tolerable.
Something like this for me: joxi.ru/8AnBLbgh5oXjAO