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


209

我正在用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指南针或其他内容?


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

Answers:


201

如果您在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,变量等)放置在早期加载的目录中。否则,加载顺序是并且应该是不相关的...如果我们做的正确。


7
或添加@import "*"(在application.css.scss中)(如果您的控制器css / scss文件与application.css.scss一起位于“ app / assets / stylesheets”文件夹中)。
Magne 2013年

这个“宝石”是错误的,不能在Windows上运行,请参阅已打开很长时间的这个问题,从本质上讲,
pilavdzice 2014年

您是在谈论克里斯·埃普斯坦(Chris Eppstein)的无礼之举。我的答案使用的是sass-rails宝石,我认为是不同的。我不在Windows上,但是没有看到与sass-rails gem有关的任何问题。
丹尼斯·贝斯特

1
这对我不起作用-遍历被分解为单个文件的各个普通css @import行。令人讨厌的是,这是在开发人员中工作的,但没有在生产中工作(因为只有一个root的application.css根路径在生产中)
Peter Ehrlich 2015年

5
感谢我的提示,对我来说很棒。我很高兴地感到@import "*"在application.scss中包含了同一目录中存在的所有其他文件,但没有重新包含application.scss ...我希望得到一个无限循环的错误。
Topher Hunt

94

此功能永远不会成为Sass的一部分。主要原因之一是进口订单。在CSS中,最后导入的文件可以覆盖之前声明的样式。如果导入目录,如何确定导入顺序?不可能没有引入某种新的复杂性。通过保留导入列表(如您在示例中所做的那样),您可以清楚地知道导入顺序。如果您希望能够放心地覆盖另一个文件中定义的样式,或者在一个文件中写入mixins并在另一个文件中使用它们,那么这是至关重要的。

要进行更彻底的讨论,在此处查看此封闭功能请求


260
对于结构良好的CSS文件,包含顺序应该无关紧要
Milovan Zogovic,2012年

57
@MilovanZogovic严重依赖覆盖具有代码味道,但是使用级联没有什么不妥当之处。这是语言的设计方式。
布兰登·马西斯

34
@BrandonMathis我在这里了解理论上的纯正性,但是在一个实现(我的假设是受腐蚀的)中,您可以选择编写CSS,这样不同的文件不会相互影响。我有一个名为“模块”的目录,每个文件包含一个不同的CSS类规则。我希望包含该目录中的所有文件,并且它们的顺序不重要,并且从设计上讲永远都不重要。每当我添加一个新列表时,都必须更新列表,这很痛苦。
罗宾·温斯洛

5
如果我的目录充满了不适用的CSS,%rules,函数等,则不会涉及风险,相反的情况(不允许这样做)只会导致文件中的乏味乏味和冗长的“导入标头”,而不仅仅是一个@import "/functions"或的单行@import "partials/"
srcspider

3
一个用例是导入模块,其中顺序并不重要,并且样式可以命名空间...我希望看到此功能-尽管同意必须明智地使用它...
Will Hancock 2014年


33

__partials__.scss在相同目录下创建一个文件partials

|- __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"


2
那是一个很好的解决方案。这就是指南针简化其包含+1的作用
Jethro Larson 2013年

8
这基本上与OP设置相同。他希望@import 'partials/xyz'每次创建新的部分时都无需手动添加语句即可导入文件。
gyo

1
Downvoters + Upvoters:您能解释一下这个答案与OP设置有何不同吗?
gyo

4
那什么都没解决。
oligofren

2
@gyo如果他们只有一个局部目录,这对OP没有帮助,但确实对具有多个局部目录的人们有所帮助。如果我有formswidgets目录,我可以@import "forms"; @import "widgets"在一个页面的主CSS文件,只担心所有单个谐音(@import forms/text; @import forms/button...)内forms.scsswidgets.scss
ttotherat

4

您可以通过将sass文件放置在文件夹中来导入和导入该文件中的所有文件,从而使用一些解决方法,如下所示:

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

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

在下一个目录级别的文件中,您仅使用import导入文件,该文件从该目录中导入了所有文件:

文件路径:main / main.scss

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

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


3

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

@import
  'foo',
  'bar';

我喜欢这个。


2

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

看起来不像。

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


是的,看到了文档,只是检查了是否有人知道一个把戏,或者希望它只是没有记载的大声笑。不过,感谢您的建议
腐蚀了

2

丹尼斯·贝斯特(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中应该存在全局导入。


如果使用类似RSCSS的方法,则特异性是相同的,并且每个组件仅在需要的地方应用而不会发生冲突。
RWDJ

1

我还会搜索您问题的答案。对应答案正确导入所有功能不存在。

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

0

这对我来说很好

@import 'folder/*';

7
我认为这是由于红宝石功能而不是SASS。一些编译器用这种方式有问题。例如,我通过gulp-ruby-sass使用了它,它起作用了,但是使用gulp-sass则引发了错误。
2014年

0

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

0

这可能是一个老问题,但在2020年仍然有意义,因此我可能会发布一些更新。自从Octobers'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


1
我认为您想@forward在_index.scss中使用而不是@use
Isaac Pak

-4

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

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

有关Sass导入功能的更多信息,请参见此处

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.