我按照概述的方式组织我的 sass (scss) 文件 here ...
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 和 modules 的目的:partials 输出 css,而模块定义更容易重用的 mixins、变量等。
我的问题: 如果我想编写一个使用来自另一个 模块的 mixin 的模块怎么办?例如,我有一个为媒体查询定义混入的模块。我有另一个模块,它定义了一个 mixin,用于响应地缩放拼写错误(调整行高、字体大小等)。我希望后者使用我的响应式 mixin,但我不想将第一个模块复制/粘贴到第二个模块中。我应该只 @import 第一个到第二个吗?这方面的最佳做法是什么?
最佳答案
无论哪个文件是您首先要导入的依赖项。
我喜欢保持我的结构相当平坦,并将所有内容导入一个 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";
关于css - SASS 元素设置 : mixins that depend on other mixins,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24330949/