我用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之类的?


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

看起来不像。

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


This feature will never be part of Sass. One major reason is import order. In CSS, the files imported last can override the styles stated before. If you import a directory, how can you determine import order? There's no way that doesn't introduce some new level of complexity. By keeping a list of imports (as you did in your example), you're being explicit with import order. This is essential if you want to be able to confidently override styles that are defined in another file or write mixins in one file and use them in another.

有关更详细的讨论,请查看此封闭功能请求:


看看ass-globbing项目。


我创建了一个名为__partials__的文件。SCSS在同一目录的部分

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

在__partials__。scss,我写了这些:

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

所以,当我想导入整个partial时,只需写@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

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

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

文件路径:主要/ main.scss

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

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


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

这就是为什么我写了一个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简单和干净。

我组织导入的方法是添加一个_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,但这只是一个注释。这个问题的解决方案是使用索引文件来简化包括整个文件夹。下面的例子。

// 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