@importを使用してsassにディレクトリ全体をインポートすることは可能ですか？

私はスタイルシートを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などの部分ディレクトリ全体（SASS-partialsでいっぱいのディレクトリです）を含める方法はありますか？

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行よりも少し複雑ではありません。

ロード順序に対処するために、最初にロードする必要があるファイル（ミックスイン、変数など）を早期ロードディレクトリに配置します。それ以外の場合、ロードの順序は適切であり、適切である必要があります。

この機能はSassの一部にはなりません。主な理由の1つは輸入注文です。CSSでは、最後にインポートされたファイルは、前述のスタイルを上書きできます。ディレクトリをインポートする場合、インポート順序をどのように決定できますか？新しいレベルの複雑さをもたらさない方法はありません。（例で行ったように）インポートのリストを保持することで、インポートの順序を明示的にすることができます。これは、別のファイルで定義されているスタイルを自信を持ってオーバーライドしたり、あるファイルにミックスインを書き込んで別のファイルで使用したりできるようにする場合に不可欠です。

より完全な議論については、このクローズド機能のリクエストをここで確認してください：

sass-globbingプロジェクトをチェックしてください。

__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"ます。

次のように、インポートしたいファイルにsassファイルを置き、そのファイル内のすべてのファイルをインポートすることにより、少しの回避策を使用できます。

ファイルパス：main / current / _current.scss

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

そして次のdirレベルのファイルでは、そのdirからすべてのファイルをインポートしたファイルにimportを使用します。

ファイルパス：main / main.scss

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

そうすれば、dir全体をインポートするのと同じように、同じ数のファイルができます。順序に注意してください。最後に来るファイルは、一致するスタイルを上書きします。

ソースの順序を保持したい場合は、これを使用できます。

@import
  'foo',
  'bar';

私はこれが好きです。

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

それのように見えません。

これらのファイルのいずれかで常に他のファイルが必要な場合は、他のファイルをインポートして、最上位のファイルのみをインポートするようにしてください。それらがすべてスタンドアロンである場合、今のようにそれを続けなければならないでしょう。

デニス・ベストの認められた回答は、「そうでなければ、ロードの順序は無関係であるはずです...私たちが適切に物事を行っているなら」。これは単に正しくありません。物事を適切に行っている場合は、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に存在する必要があるとまだ思います。

また、質問への回答も検索します。正解インポート機能に対応していない回答に対応しています。

そのため、次のようにscssフォルダーのルートに配置する必要があるpythonスクリプトを作成しました。

- 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 'folder/*';

すべてを自動的にインポートする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

インポートするファイルを定義すると、すべてのフォルダーに共通の定義を使用できます。

そう、 @import "style/*"スタイルフォルダー内のすべてのファイルをコンパイルします。

Sassのインポート機能の詳細については、こちらをご覧ください。