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


当前回答

如果您在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、变量等)放在一个早期加载目录中。否则,加载顺序是和应该是无关的…如果我们做得正确的话。

其他回答

你可能想要保留源顺序,那么你可以使用这个。

@import
  'foo',
  'bar';

我更喜欢这个。

我创建了一个名为__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"。

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

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

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

看起来不像。

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

如果您在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、变量等)放在一个早期加载目录中。否则,加载顺序是和应该是无关的…如果我们做得正确的话。