@importの逆をスタイラスで行うことはできますか？

Question

繰り返していることの1つは、自分のウェブサイトのセクションに自分のスタイル（.stylファイルにある）を追加するたびに、main.stylに戻り、@importというステートメントを追加する必要があるということです。

レイアウトが1つのみの場合は、個々の.styl個のファイルのディレクトリ全体をインポートするだけですが、モバイルとデスクトップ、あるいは標準と最小限のレイアウトを使用することがよくあります。適切なmain.stylファイル（私の場合はstandard.stylとminimal.styl）に関連する@importのみが必要です。

.stylファイルには、他の.stylファイルにコンテンツを含めるべきだと教えてもらえますか？

Answer 1

Stylus（または私が知っている他のプリプロセッサ）にはこのような機能はありませんが、条件や変数を使ってハックすることができます。スタイラスでは、これは次のように何とかなります：

// standard.styl 

$context = 'standard' 
@import 'lib/*.styl' 

そして

// minimal.styl 

$context = 'minimal' 
@import 'lib/*.styl' 

そして、あなたは条件にすべてのコンテンツをラップすることで、あなたの含まれるファイルのいずれかを記述することができます。

// myBlock.styl 

if $context == 'standard' 
    .myBlock 
    display: block 

を1つのファイルに複数のコンテキストを混在させることも、1つのブロックに対して複数のコンテキストを混在させることもできます。

しかし、私の意見では、それぞれのバリアントのメディアクエリを使用してこれらのすべてを処理する方が簡単ですが、適合しない環境があるかもしれません。そのような条件による分割は完全に機能するはずです。

Answer 2

"逆インポート"、つまり特定のファイルを別のファイルにインポートするという指示を使用することは、Sass以下ではサポートされていません。

"Glob importing"もネイティブサポートされていません。しかしLessの場合、これはプラグインとして実装されています：https://github.com/just-boris/less-plugin-glob。