我正在使用 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
有没有办法像@import compass 之类的包含整个partials 目录（它是一个充满SASS-partials 的目录）？
【问题讨论】：
@import 'partials/header', 'partials/viewport', 'partials/footer';。
这可能是一个老问题，但在 2020 年仍然相关，所以我可能会发布一些更新。 自 10 月 19 日更新以来，我们通常应该使用 @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
【讨论】：
@forward 而不是 @use
_index.scss。 @import foobar/**/* 和 @use 或`@forward` 真的没有办法吗？
您可以生成自动导入所有内容的 SASS 文件，我使用这个 Gulp 任务：
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'))
})
您还可以通过像这样对文件夹进行排序来控制导入顺序：
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
]
【讨论】：
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 导入，用于顺序无关紧要的情况，例如 mixins 甚至动画的目录。
【讨论】：
【讨论】：
您可能希望保留源顺序，然后您就可以使用它。
@import
'foo',
'bar';
我更喜欢这个。
【讨论】：
如果您在 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、变量等）放置在早期加载目录中。否则，加载顺序是并且应该是无关紧要的......如果我们做事正确。
【讨论】：
@import "*"（在 application.css.scss 中）如果您的控制器 css/scss 文件与 application.css.scss 一起位于“app/assets/stylesheets”文件夹中。
@import "*" 包含同一目录中存在的所有 other 文件，但不重新包含 application.scss ...我希望得到无限循环错误。
我也在寻找您问题的答案。对应答案正确的 import all 函数不存在。
这就是为什么我编写了一个 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';
【讨论】：
您可以使用一些解决方法，将 sass 文件放在您想要导入的文件夹中，然后像这样导入该文件中的所有文件：
文件路径：main/current/_current.scss
@import "placeholders";
@import "colors";
在下一个目录级别文件中，您只需使用 import for file 从该目录导入所有文件：
文件路径：main/main.scss
@import "EricMeyerResetCSSv20";
@import "clearfix";
@import "current";
这样您就拥有相同数量的文件，就像您正在导入整个目录一样。注意顺序，最后出现的文件会覆盖匹配的阶梯。
【讨论】：
此功能永远不会成为 Sass 的一部分。一个主要原因是进口订单。在 CSS 中，最后导入的文件可以覆盖前面所述的样式。如果导入目录，如何确定导入顺序？没有办法不引入一些新的复杂程度。通过保留导入列表（如您在示例中所做的那样），您可以明确导入顺序。如果您希望能够自信地覆盖在另一个文件中定义的样式或在一个文件中编写 mixin 并在另一个文件中使用它们，那么这是必不可少的。
如需更深入的讨论，请在此处查看this closed feature request：
【讨论】：
@import "/functions" 或 @import "partials/"。
这对我来说很好用
@import 'folder/*';
【讨论】：
【讨论】：
我在partials的同一目录下创建了一个名为__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"。
【讨论】：
@import 'partials/xyz' 语句来导入文件。
forms 和widgets 目录，我可以在页面的主CSS 文件中使用@import "forms"; @import "widgets"，而只需担心forms.scss 和widgets.scss 中的所有单个部分（@import forms/text; @import forms/button...） .
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
看起来不像。
如果这些文件中的任何一个始终需要其他文件，则让它们导入其他文件并仅导入顶级文件。如果它们都是独立的，那么我认为您将不得不像现在一样继续这样做。
【讨论】：