SASSで別のファイルのクラスから継承することは可能ですか？

102

質問はほとんどすべてを言います。

たとえば、Twitter Bootstrapを使用している場合、BootstrapのCSSクラスから継承するクラスを自分のSASSスタイルシートで定義できますか？または、SASSの継承は単一ファイルのスコープ内でのみ機能しますか？

css inheritance stylesheet sass

— タオ・ダン
ソース

180

はい！それが可能だ。

すべての<button>要素にTwitter Bootstrapのデフォルトボタン.btnからクラスを継承させる場合

あなたのstyles.scssファイルでは、最初にインポートする必要があります_bootstrap.scss：

@import "_bootstrap.scss";

次にインポートの下：

button { @extend .btn; }

— agustibr
ソース

他の答えがこの質問にかなり答えたので、私はこれをするのが気分が悪いです（しばらくチェックしてから、忘れていました）。しかし、それが最も完全であるため、私はあなたの回答を受け入れています。ありがとう！

— Dan Tao

4

これは他のSCSSファイルでのみ機能しますか？CSSファイルでこれを行うことはできませんか？

— クラッシュ

1

@extend期待どおりに機能しない可能性があるため、bootstrap / anyフレームワークと一緒に使用する場合は注意してください。この記事で説明したように注意することがいくつかあります。stackoverflow.com/questions/30744625/...

— パトリックAffentranger

2

しかし、プロジェクトの複数のファイルでこれを行う場合、bootstrap.scssからCSSを複製しませんか？

— fritzmg 2015年

1

これは全体bootstrap.cssをインポートするのですか、styles.cssそれとも単にインポートするの.btnですか？私は出力バンドルを意味しますか？全体をインポートbootstrap.cssすると、のサイズがstyles.css不必要に大きくなります。

— マーベリック

8

**私は間違っているかもしれませんが、あなたがやろうとしていることを理解したら、@extend .classname;拡張したい要素内のコマンドを使用できませんか？当然、更新可能性を維持するために、独自のコードのみを変更する必要があります。

— マーク・エルンスト
ソース

2

私の知る限りでは@import、SASSファイルで使用するクラスを含むファイルを使用して、そのファイルでそれらを利用する必要があります。ただし、私はSASS / SCSSの専門家ではないため、知らないうちにリモートで使用する別の方法を知っている人がいるかもしれません。

— スコット
ソース

1

受け入れられた回答が@importでこれが可能であることを示したように、@ importはsassによって非推奨になりました

Sassチームは@importルールの継続的な使用を推奨していません。Sassは今後数年間で段階的に段階的に廃止し、最終的には言語から完全に削除します。代わりに@useルールを使用してください。

@useルールは、インポート（ユーザー）モジュールのスコープを汚染しないため、現在の使用に適しています。残念ながら、この記事の執筆時点では、使用規則はDart sassでのみ実装されています。

— エハブ
ソース