web-dev-qa-db-ja.com

@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などのようなpartialsディレクトリ全体（SASS-partialでいっぱいのディレクトリ）を含める方法はありますか？

importsasspartials
187
corroded

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

ロード順序に対処するために、最初にロードする必要のあるファイル（ミックスイン、変数など）を早期ロードディレクトリに配置します。そうでなければ、ロードの順序は関係ありません。適切に処理を行っている場合は関係ありません。

187
Dennis Best

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

より詳細な議論については、 このクローズドフィーチャーリクエスト をご覧ください。

88
Brandon Mathis

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

40
Akshay Rawat

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"を記述することもできます。

33
fen

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

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

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

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

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

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

この方法では、ディレクトリ全体をインポートしているように、同じ数のファイルがあります。順序に注意してください。最後に来るファイルは、一致するスタイルをオーバーライドします。

4
IGRACH

デニス・ベストによる受け入れられた答えは、「そうでなければ、ロード順序は無関係であるはずです...適切に物事を行っている場合」これは単に間違っています。適切に物事を行っている場合は、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ファイルの構造が深すぎるとは思わない。

私はこのアプローチを使用していますが、ミックスインのディレクトリやアニメーションのような順序が重要でない状況では、globインポートがsassに存在する必要があると考えています。

2
BRN

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

@import
  'foo',
  'bar';

私はこれが好きです。

2
dewwwald

あなたの質問に対する答えも探しています。回答に対応して、すべての関数を正しくインポートすることはできません。

それが、あなたが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';
1
Sens4

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

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

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

1
xaxxon

これは私のためにうまくいった

@import 'folder/*';
0
Siddhartha Mukherjee

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