是否可以使用@import导入sass中的整个目录？

Question

我正在使用SASS部分模块化我的样式表,如下所示:

@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues

有没有办法包括整个partials目录(这是一个充满SASS-partials的目录),如@import罗盘或什么？

Answer 1

如果您在Rails项目中使用Sass,则sass-rails gem(https://github.com/rails/sass-rails)具有glob导入功能.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

在另一个答案中回答问题"如果你导入一个目录,你如何确定导入顺序？没有办法不会引入一些新的复杂程度."

有人会争辩说将文件组织到目录中会降低复杂性.

我的组织的项目是一个相当复杂的应用程序.17个目录中有119个Sass文件.这些大致对应于我们的视图,主要用于调整,繁重的工作由我们的自定义框架处理.对我来说,几行导入的目录比119行导入的文件名复杂得多.

为了解决加载顺序,我们将需要首先加载的文件 - mixins,变量等 - 放在早期加载目录中.否则,加载顺序是并且应该是无关紧要的...如果我们正在做正确的事情.

Answer 2

此功能永远不会成为Sass的一部分.一个主要原因是进口订单.在CSS中,最后导入的文件可以覆盖之前描述的样式.如果导入目录,如何确定导入顺序？没有办法不会引入一些新的复杂程度.通过保留导入列表(就像您在示例中所做的那样),您明确了导入顺序.如果您希望能够自信地覆盖在另一个文件中定义的样式或在一个文件中编写mixins并在另一个文件中使用它们,则这是必不可少的.

有关更全面的讨论,请在此处查看此已关闭的功能请求:

Answer 3

查看sass-globbing项目.

Answer 4

我创建了一个名为__partials__.scss同一目录的文件partials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

在__partials__.scss,我写了这些:

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

所以,当我想要导入整个时partials,只需写@import "partials".如果我想要导入其中任何一个,我也可以写@import "partials/header".

Answer 5

这可能是一个老问题，但在 2020 年仍然相关，所以我可能会发布一些更新。自 19 年 10 月更新以来，我们通常应该使用@use而不是@import，但这只是一个备注。这个问题的解决方案是使用索引文件来简化包括整个文件夹。下面举例。

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files