我用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目录(它是一个充满sas -partials的目录),比如@import compass之类的?


当前回答

你可以使用一些变通方法,在你想导入的文件夹中放置一个sass文件,然后像这样导入该文件中的所有文件:

当前文件路径:主要/ / _current.scss

@ import“占位符”; @ import“颜色”;

在下一个dir级别的文件中,你只需使用import for file导入该dir级别的所有文件:

文件路径:主要/ main.scss

@ import“EricMeyerResetCSSv20”; @ import“clearfix”; @ import“当前”;

这样你就有了相同数量的文件,就像你导入了整个目录。注意顺序,最后出现的文件将覆盖匹配的斯蒂尔。

其他回答

看看ass-globbing项目。

Dennis Best给出的公认答案是:“否则,加载顺序是而且应该是无关紧要的……如果我们做得正确的话。”这是不正确的。 如果你做的事情是正确的,你使用css的顺序来帮助你减少特异性和保持你的css简单和干净。

我组织导入的方法是添加一个_all。scss文件在一个目录,在那里我导入所有相关的文件,在正确的顺序。 这样,我的主导入文件就会简单而干净,就像这样:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

如果你需要,你也可以为子目录这样做,但我不认为你的css文件的结构应该太深。

虽然我使用了这种方法,但我仍然认为在sass中应该存在glob导入,用于顺序无关紧要的情况,比如mixin目录甚至动画。

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

这就是为什么我写了一个python脚本,你需要把它放在你的scss文件夹的根目录下,就像这样:

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

然后它将遍历树并找到所有scss文件。一旦执行,它将创建一个名为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';

这可能是一个老问题,但在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

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

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

更多关于Sass的导入特性,你可以在这里找到。