是否可以使用\`import在sass中导入整个目录?

导入 CSS

Davaid前端LEY

2020-03-17

我正在用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

有没有办法包含整个部分目录(这是一个充满SASS部分的目录),例如@import指南针或其他内容?

第1930篇《是否可以使用\`import在sass中导入整个目录?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
Stafan路易 2020.03.17

通过定义要导入的文件,可以使用所有文件夹的通用定义。

因此,@import "style/*"将编译样式文件夹中的所有文件。

您可以在这里找到有关Sass导入功能的更多信息

飞云泡芙 2020.03.17

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

看起来不像。

如果这些文件中的任何一个总是需要其他文件,则让它们导入其他文件,而仅导入顶级文件。如果它们都是独立的,那么我认为您将必须像现在一样继续这样做。

凯阳光 2020.03.17

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

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

要在另一个答案中回答这个问题,“如果您导入目录,那么如何确定导入顺序?没有办法不会带来某种新的复杂性。”

有人认为将文件组织到目录中可以减少复杂性。

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

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

Itachi小宇宙 2020.03.17
Jim古一 2020.03.17

此功能永远不会成为Sass的一部分。主要原因之一是进口订单。在CSS中,最后导入的文件可以覆盖之前声明的样式。如果导入目录,如何确定导入顺序?不可能没有引入新的复杂性。通过保留一个导入列表(如您在示例中所做的那样),您可以清楚地知道导入顺序。如果您希望能够放心地覆盖另一个文件中定义的样式,或者在一个文件中写入mixins并在另一个文件中使用它们,那么这是至关重要的。

要进行更彻底的讨论,在此处查看此封闭功能请求

路易Stafan 2020.03.17

__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"

神乐米亚 2020.03.17

您可以通过将sass文件放置在文件夹中来导入和导入该文件中的所有文件,从而使用一些解决方法,如下所示:

文件路径:main / current / _current.scss

@import "placeholders"; @import "colors";

在下一个目录级别的文件中,您仅使用import导入文件,该文件从该目录中导入了所有文件:

文件路径:main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

这样,您就可以拥有相同数量的文件,就像您要导入整个目录一样。注意顺序,最后出现的文件将覆盖匹配的阶梯。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android