236

次のように、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-partialsでいっぱいのディレクトリ）を含める方法はありますか？

4

13 に答える 13

100

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

より詳細な議論については、このクローズド機能リクエストをここで参照してください。

于 2011-01-24T06:56:29.990 に答える
41

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

于 2012-04-07T06:20:00.190 に答える
36

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

于 2012-10-18T01:53:12.170 に答える
4

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

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

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

そして次のディレクトリレベルのファイルでは、そのディレクトリからすべてのファイルをインポートしたファイルにインポートを使用するだけです:

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

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

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

于 2014-05-26T18:33:59.813 に答える
3

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

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

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

于 2011-01-24T04:40:04.187 に答える
3

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

@import
  'foo',
  'bar';

私はこれが好きです。

于 2016-10-21T16:23:04.183 に答える
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 ファイルの構造が深すぎるべきではないと思います。

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

于 2018-04-30T07:51:24.180 に答える
-1

これは私にとってはうまくいきました

@import 'folder/*';
于 2013-04-20T06:03:37.323 に答える
-4

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

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

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

于 2018-03-08T10:44:20.313 に答える