Блог

Я упорядочиваю свои файлы sass (scss) так, как описано здесь…

 stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins   global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file
 

Я понимаю цель разграничения частичных элементов и модулей: частичные элементы выводят css, Тогда как модули определяют микшины, переменные и т. Д., Которые Легче использовать повторно.

Мой вопрос: что, если я хочу написать модуль, который использует микшины из другого модуля? Например, у меня есть модуль, который определяет микширование для медиа-запросов. У меня есть еще один модуль, который определяет микширование для быстрого масштабирования опечаток (настройка высоты строки, размера шрифта и т. Д.). Я хочу, чтобы последний использовал мой адаптивный микширование, но я не хочу копировать / вставлять первый модуль во второй. Должен ли я просто @импортировать первый во второй? Какова наилучшая практика для этого?

Какой бы файл ни был зависимым, вы сначала импортируете его.

Мне нравится сохранять свою структуру довольно плоской и просто импортировать все в один основной файл.scss.

 @import "variables";
@import "base-classes";
@import "mixins";

@import "fonts";
@import "typography";

@import "elements";

@import "layouts/spree_application";

@import "orders";

@import "products/show";

@import "shared/breadcrumbs";
@import "shared/feed";
@import "shared/footer";
@import "shared/header";
@import "shared/subscribe";
@import "shared/taxonomies";

// Checkout pages
@import "checkout/edit";
@import "checkout/summary";

@import "checkout/delivery";
@import "checkout/payment";
@import "checkout/confirm";

// Pages
@import "lookbooks";

@import "news/index";
@import "news/show";

@import "stockists";
@import "surfclub";
@import "about";
@import "returnsexchanges";