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

我用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或其他什么?

185392 次浏览
小开

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

看起来不像。

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

小开

这个特性永远不会成为Sass的一部分。一个主要原因是进口订单。在CSS中，最后导入的文件可以覆盖前面声明的样式。导入目录时，如何确定导入顺序?不可能不引入一些新的复杂程度。通过保存导入列表(就像在示例中所做的那样)，可以显式地指定导入顺序。如果您希望能够自信地覆盖在另一个文件中定义的样式，或者在一个文件中编写mixin并在另一个文件中使用它们，这是必不可少的。

有关更详细的讨论，请查看这里的这个封闭的特性请求:

小开

检查sass-globbing项目。

小开

我在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 'folder/*';
小开
最佳答案

如果在Rails项目中使用Sass，则Sass - Rails gem https://github.com/rails/sass-rails具有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、变量等)放在一个早期加载目录中。否则，加载顺序是和应该是无关的…如果我们做得正确的话。

小开

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

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

< p > <代码> @ import“占位符”; @ import“颜色”;< /代码> < / p >

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

文件路径:主要/ main.scss

< p > <代码> @ import“EricMeyerResetCSSv20”; @ import“clearfix”; @ import“当前”;< /代码> < / p >

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

小开

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

这就是为什么我写了一个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/*"将编译样式文件夹中的所有文件。

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

小开
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目录甚至动画。

小开

你可以生成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
]
小开
这可能是一个老问题，但在2020年仍然相关，所以我可能会发布一些更新。 自19年10月的更新以来，我们通常应该使用@use而不是@ import，但这只是一个注释。这个问题的解决方案是使用索引文件来简化包括整个文件夹。在下面的例子。< / p > 
// 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


提交答案