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

其他回答

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

看看ass-globbing项目。

你可以生成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
]

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

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

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

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

文件路径:主要/ main.scss

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

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

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