LESS：mixinを別のmixinに引数として渡すにはどうしたらいいですか？

Question

私は

.on-small(@rules) { 
    @media (@minWidthSmall) { @rules(); } 
} 

.on-medium(@rules) { 
    @media (@minWidthMedium) { @rules(); } 
} 

// and .on-large, .on-x-large and so on 

を照会し、私は私が私ので、パラメータとして言及したミックスインをパスしようとしている、非常に単純なFlexベースのグリッドシステムを構築しようとしているメディアを使用していくつかのルールを適用するいくつかの基本的なミックスインを持っています一般的な.make-column mixinを有することができる。次のように：

.make-col(@break-point-mixin, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 


    /*********************************************************** 
    Is the following line possible in LESS somehow? 
    ***********************************************************/ 
    @break-point-mixin({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@break-point-mixin: .on-small, @span, @size); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@break-point-mixin: .on-medium, @span, @size); 
} 

しかし残念ながら、パラメータとして@break-point-mixinを渡すとして.make-colクラッシュの内部から呼び出す：いいえ、あなたはパラメータと使用としてミックスイン名を送信することはできません

Unrecognised input. Possibly missing opening '('

Answer 1

mixinの名前の一部ではありません。このことを念頭に、あなたの例になると：

.on(small, @rules) { 
    @media (@minWidthSmall) {@rules();} 
} 

.on(medium, @rules) { 
    @media (@minWidthMedium) {@rules();} 
} 

.make-col(@device, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 
    .on(@device, { 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

// usage: 

.make-col(small, @span, @size); 

ご.grid-col-on-*ミックスインのために同じ、彼らは1つだけです：

.grid-col-on(@device, @span: 1, @size: 1) { 
    .make-col(@device, @span, @size); 
} 

のように。

実際にフレキシブル/汎用グリッドが必要な場合ハードコードのデバイス/ブレークポイント名をミックスインまたは変数名に追加します（詳細についてはhttps://github.com/less/less.js/issues/2702を参照してください）。

Answer 2

それはそのように。

代わりに.make-col mixinの代わりにラッパーmixinからメディアクエリmixinが直接呼び出されるようなことができます。ラッパーのミックスインは、メディアクエリーミックスに必要な変数を認識しているため、問題はありません。あなたは、あなたが以下のようなルールセットにそれらを設定し、それを使用することができます上記のミックスインでルールを書き換え懸念がある場合

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-small({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-medium({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

。

@colRules: { 
      width: percentage(@span/@size); 
      min-width: percentage(@span/@size); 
      }; 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-small(@colRules); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-medium(@colRules); 
} 

それとも、あなたはパラメータとしてミックスイン名を送信し、以下のようにガードを使用することができます。私たちがここでブレークポイントを扱っているので、たくさんあるべきではないので、このアプローチは助けて、おそらく私の投票を得るでしょう。私はあなたが.on-small/.on-mediumにこれらsmallとmedium物事はまた、パラメータに過ぎないので、すべきであるという事実を逃していると言うだろう（任意のmixin名を持つ一般的な場合とは異なり）、この特定のケースで

@colRules: { 
      width: percentage(@span/@size); 
      min-width: percentage(@span/@size); 
      }; 

.make-col(@breakpoint, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 
    & when (@breakpoint = s) { 
    .on-small(@colRules); /* or you could replace this with that mixin's content also */ 
    } 
    & when (@breakpoint = m) { 
    .on-medium(@colRules); 
    } 
    /* and so on for the rest */ 
} 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(s, @span, @size); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(m, @span, @size); 
}