Question

我按照here ...

概述的方式组织我的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

我理解区分 partials 和模块的目的：partials输出css，而模块定义更容易重用的mixins，变量等。

我的问题： 如果我想编写一个使用另一个模块的mixins的模块怎么办？例如，我有一个模块，用于定义媒体查询的mixin。我有另一个模块，它定义了一个用于响应缩放错误的mixin（调整行高，字体大小等）。我希望后者使用我的响应式mixin，但我不想将第一个模块复制/粘贴到第二个模块中。我应该只是@import第一个进入第二个？这是最好的做法是什么？

Answer 1

无论哪个文件是依赖文件，您都可以先导入它。

我喜欢保持我的结构相当平坦，只需将所有内容导入到一个main.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";

SASS项目设置：依赖于其他mixins的mixins

1 个答案: