是否有可能使用@import在sass中导入整个目录?

我使用SASS partials模块化我的样式表,如下所示:

@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指南针或什么的?

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

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

在另一个答案中回答这个问题:“如果你导入一个目录,你怎么能确定import顺序?没有办法不会引起一些新的复杂程度。”

有人会争辩说,组织你的文件到目录可以减less复杂性。

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

为了处理加载顺序,我们把需要加载的文件放在一个早期的加载目录中 – mixin,variables等等。 否则,加载顺序是,应该是无关的…如果我们正在做的事情。

这个function永远不会成为Sass的一部分。 一个主要原因是import订单。 在CSS中,最后导入的文件可以覆盖之前所述的样式。 如果您导入目录,您如何确定导入顺序? 没有办法不会引入一些新的复杂程度。 通过保留一个导入列表(就像你在你的例子中所做的那样),你对导入顺序是显式的。 如果您希望能够置信地覆盖在另一个文件中定义的样式或将mixin写入一个文件并在另一个文件中使用它们,这一点非常重要。

有关更深入的讨论, 请在此处查看此closures的function请求 :

查看sass-globbing项目 。

我在partials的同一目录下创build一个名为__partials__.scss的文件

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

你可以使用一些解决方法,把一个sass文件放到你想导入的文件夹中,并像这样导入这个文件中的所有文件:

文件path:main / current / _current.scss

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

而在下一个dir级别的文件中,您只需使用导入文件从哪个目录导入所有文件:

文件path:main / main.scss

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

这样你有相同数量的文件,就像你正在导入整个目录。 注意订单,最后的文件将覆盖相匹配的阶梯。

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

看起来不像。

如果这些文件中的任何一个总是需要其他文件,那么让他们导入其他文件,只导入顶层文件。 如果他们都是独立的,那么我认为你将不得不继续像现在这样做。

这对我来说工作得很好

 @import 'folder/*'; 

你可能想保留源代码,然后你可以使用这个。

//sass @import 'foo', 'bar';

我更喜欢这个。

我也寻找你的问题的答案。 对应的答案正确的导入所有function不存在。

这就是为什么我写了一个Python脚本,你需要把它放到你的scss文件夹的根目录下,如下所示:

 - scss |- scss-crawler.py |- abstract |- base |- components |- layout |- themes |- vender 

然后它将遍历树并find所有的scss文件。 一旦执行,它将创build一个名为main.scss的scss文件

 #python3 import os valid_file_endings = ["scss"] with open("main.scss", "w") as scssFile: for dirpath, dirs, files in os.walk("."): # ignore the current path where the script is placed if not dirpath == ".": # change the dir seperator dirpath = dirpath.replace("\\", "/") currentDir = dirpath.split("/")[-1] # filter out the valid ending scss commentPrinted = False for file in files: # if there is a file with more dots just focus on the last part fileEnding = file.split(".")[-1] if fileEnding in valid_file_endings: if not commentPrinted: print("/* {0} */".format(currentDir), file = scssFile) commentPrinted = True print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile) 

输出文件的一个例子:

 /* abstract */ @import './abstract/colors'; /* base */ @import './base/base'; /* components */ @import './components/audioPlayer'; @import './components/cardLayouter'; @import './components/content'; @import './components/logo'; @import './components/navbar'; @import './components/songCard'; @import './components/whoami'; /* layout */ @import './layout/body'; @import './layout/header'; 

都会编译到

  1. @import“foo.css”;
  2. @import“foo”屏幕;
  3. @import“ http://foo.com/bar ”;

也可以在一个@import中导入多个文件。 例如:

@import“圆angular”,“文字阴影”;

http://sass-lang.com/documentation/file.SASS_REFERENCE.html