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

我正在使用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 compass之类的

看起来不像

---

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

此功能永远不会成为Sass的一部分。一个主要原因是进口订单。在CSS中，上次导入的文件可以覆盖前面所述的样式。如果导入目录，如何确定导入顺序？这不可能不带来新的复杂性。通过保存一个导入列表（如您在示例中所做的），您就可以明确导入顺序。如果您希望能够自信地覆盖在另一个文件中定义的样式，或者在一个文件中写入混音并在另一个文件中使用它们，这一点非常重要

---

要进行更深入的讨论，请查看此处：

查看。

我在

部分的同一目录中创建了一个名为
\uuuuu partials\uuuuuuu.scs
的文件

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

在
\uuuu partials\uuuuuu.scss
中，我写了以下内容：

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

因此，当我想导入整个
部分时，只需编写
@import“partials”
。如果我想导入其中任何一个，我还可以编写
@import“partials/header”
这对我来说很好

@import 'folder/*';

如果您在Rails项目中使用Sass，那么Sass Rails gem具有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行导入的文件名稍微简单一些

为了解决加载顺序问题，我们将需要首先加载的文件（mixin、variables等）放在早期加载目录中。否则，加载顺序是并且应该是无关的。。。如果我们做得很好。
您可以通过将sass文件放在您想要导入的文件夹中，然后像下面这样导入该文件中的所有文件，来使用一些变通方法：

// Import all scss in the project

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

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

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]

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

@import“占位符”；
@输入“颜色”

在下一个目录级别的文件中，您只需对从该目录导入所有文件的文件使用导入：

文件路径：main/main.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)

@import“EricMeyerResetCSSv20”；
@导入“clearfix”；
@导入“当前”

这样，您就拥有了相同数量的文件，就像导入整个目录一样。注意顺序，最后出现的文件将覆盖匹配的阶梯。
我也会搜索您问题的答案。与答案对应，不存在正确的“全部导入”功能

这就是为什么我编写了一个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';

您可能希望保留源订单，然后就可以使用它了

@import
  'foo',
  'bar';

我更喜欢这样。
通过定义要导入的文件，可以使用所有文件夹的通用定义

因此，
@import“style/*”
将编译style文件夹中的所有文件

有关Sass中导入功能的更多信息，您可以找到。
Dennis Best接受的答案指出，“否则，如果我们做得正确，加载顺序是不相关的，也应该是不相关的。”这完全是错误的。
如果你做的很好，你可以利用css的顺序来帮助你减少特殊性，保持css的简单和干净

我组织导入的方法是在目录中添加一个
\u 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';

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]

如果需要，您也可以对子目录执行此操作，但我认为css文件的结构不应该太深

尽管我使用这种方法，但我仍然认为在顺序无关紧要的情况下，sass中应该存在glob导入，例如混音目录甚至动画。
您可以生成自动导入所有内容的sass文件，我使用以下任务：

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

您还可以通过如下方式对文件夹进行排序来控制导入顺序：

// Import all scss in the project

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

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

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]

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

//foundation/\u code.scss
代码{
填充：.25em；
线高：0；
}
//基金会/_lists.scss
ul，ol{
文本对齐：左对齐；
& & {
填充：{
底部：0；
左：0；
}
}
}
//基金会/_index.scss
@使用“代码”；
@使用“列表”；
//style.scss
@使用“基础”；

是的，我看到了文档，只是检查了一下是否有人知道一个小把戏，或者希望它只是未记录的lol。感谢您的建议。对于结构良好的css文件，包含顺序不应该matter@MilovanZogovic严重依赖覆盖有一种代码味道，但使用级联并没有什么不当之处。这就是语言的设计方式。@BrandonMathis我理解这里的理论纯度，但是在一个实现中（我和我假设是腐蚀的），您可以选择编写CSS