【问题标题】:Is it possible to import a whole directory in sass using @import?是否可以使用@import 在 sass 中导入整个目录?
【发布时间】:2011-06-14 07:10:06
【问题描述】:

我正在使用 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 的目录)?

【问题讨论】:

  • 不是答案,但很有用:SASS 可以一次导入多个文件,例如 @import 'partials/header', 'partials/viewport', 'partials/footer';

标签: import sass partials


【解决方案1】:

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

【讨论】:

  • 我认为您想在 _index.scss 中使用 @forward 而不是 @use
  • 更好/推荐的方法恕我直言。
  • 但这仍然需要您每次创建一个新文件到_index.scss@import foobar/**/*@use 或`@forward` 真的没有办法吗?
【解决方案2】:

您可以生成自动导入所有内容的 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
]

【讨论】:

    【解决方案3】:

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

    【讨论】:

    • 如果你使用像 RSCSS 这样的方法,那么特异性是相等的,每个组件只适用于它需要的地方,没有冲突。
    • 应以多种方式解决特异性问题的方法。顺序是一个,选择器的简单性是另一个。我认为 BEM 在这方面优于 RSCSS,因为它使用简单的选择器(如 .block__module)而不是更复杂的选择器(如 .block > module)。看看这个。但总有一些情况需要更复杂的选择器。避免特异性问题的另一个好工具是自定义属性,您可以针对特定上下文进行更改。这也是一个很好的检查。
    【解决方案4】:

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

    所以,@import "style/*" 将编译样式文件夹中的所有文件。

    更多关于 Sass 中的导入功能,你可以找到here

    【讨论】:

      【解决方案5】:

      您可能希望保留源顺序,然后您就可以使用它。

      @import
        'foo',
        'bar';
      

      我更喜欢这个。

      【讨论】:

        【解决方案6】:

        如果您在 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”文件夹中。
        • 这个“gem”有问题,不能在 Windows 上运行,看这个问题已经打开了很长时间,基本上意味着它完全坏了github.com/chriseppstein/sass-globbing/issues/3
        • 你说的是 Chris Eppstein 的 sass-globbing gem。我的答案使用了 sass-rails gem,我认为这是不同的。我不在 Windows 上,但我没有看到任何与 sass-rails gem 相关的问题。
        • 这对我不起作用- globbing 被分解为单个文件的单个 vanilla css @import 行。令人讨厌的是,在开发中工作,但在生产中没有(因为在生产中只有 application.css 的一个根资产路径)
        • 对我很有帮助,感谢您的提示。令我惊喜的是,在 application.scss 中说 @import "*" 包含同一目录中存在的所有 other 文件,但不重新包含 application.scss ...我希望得到无限循环错误。
        【解决方案7】:

        我也在寻找您问题的答案。对应答案正确的 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';
        

        【讨论】:

          【解决方案8】:

          您可以使用一些解决方法,将 sass 文件放在您想要导入的文件夹中,然后像这样导入该文件中的所有文件:

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

          @import "placeholders"; @import "colors";

          在下一个目录级别文件中,您只需使用 import for file 从该目录导入所有文件:

          文件路径:main/main.scss

          @import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

          这样您就拥有相同数量的文件,就像您正在导入整个目录一样。注意顺序,最后出现的文件会覆盖匹配的阶梯。

          【讨论】:

            【解决方案9】:

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

            如需更深入的讨论,请在此处查看this closed feature request

            【讨论】:

            • 对于结构良好的 css 文件,包含顺序无关紧要
            • @MilovanZogovic 严重依赖覆盖会产生代码异味,但使用级联并没有什么不妥之处。这就是语言的设计方式。
            • @BrandonMathis 我理解这里的理论纯度,但是在实现中(我的和我假设被腐蚀的)你可以选择以不同文件相互没有影响的方式编写你的 CSS。我有一个名为“modules”的目录,其中包含每个包含不同 css 类规则的文件。我希望包含该目录中的所有文件,并且它们的顺序并不重要,并且按照设计永远不会重要。每次添加新列表时都必须更新列表,这很痛苦。
            • 如果我的目录中充满了不适用的 css、%rules、函数等,则不存在风险,相反(不允许)只会导致无用的乏味和冗长的“导入标头”文件,而不是可能只是一行 @import "/functions"@import "partials/"
            • 一个用例是导入模块,其中顺序不重要,样式可以命名空间...我想看看这个功能 - 虽然同意它必须明智地使用...跨度>
            【解决方案10】:

            这对我来说很好用

            @import 'folder/*';
            

            【讨论】:

            • 我认为这是因为 ruby​​ 功能而不是 SASS。一些编译器有这种方式的问题。例如,我通过 gulp-ruby-sass 使用它并且它工作但使用 gulp-sass 它引发了错误。
            【解决方案11】:

            【讨论】:

            • 我的评论已经过时了几年,但是.... sass-globbing 项目的进展非常缓慢,而且只有一个开发人员不会过分关注让事情顺利进行在 Windows 上。我们刚刚开始制作一个适用于 Linux、Mac 和 WINdows 的新产品
            【解决方案12】:

            我在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"

            【讨论】:

            • 这是一个很好的解决方案。指南针就是这样做来简化他们的包容性 +1
            • 这个和OP的设置基本一样。他希望在每次创建新的部分时无需手动添加 @import 'partials/xyz' 语句来导入文件。
            • Downvoters+Upvoters:你能解释一下这个答案与 OP 设置有何不同吗?
            • 这无济于事。
            • @gyo 如果他们只有一个局部目录,它对 OP 没有帮助,但它确实可以帮助拥有多个局部目录的人。如果我有formswidgets 目录,我可以在页面的主CSS 文件中使用@import "forms"; @import "widgets",而只需担心forms.scsswidgets.scss 中的所有单个部分(@import forms/text; @import forms/button...) .
            【解决方案13】:

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

            看起来不像。

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

            【讨论】:

            • 是的,看到了文档,只是检查了是否有人知道一个技巧或希望它只是无证的哈哈。感谢您的建议
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-12-17
            • 1970-01-01
            • 2018-08-17
            • 1970-01-01
            相关资源
            最近更新 更多