問題タブ [less-mixins]

Less では、次のように記述できます。

しかし、私が書くとき：

を削除する.testと、.outer-inner出力は適切に表示されますが、再度追加すると、コンパイラは次のように言います

.outer-inner は未​​定義です。

のスタイルを再利用する方法はあります.outer-innerか?

メディアクエリの下の要素と別のクラスの子孫に同じスタイルを定義する必要があります。

LESS での完全な解決策は、次の [疑似コード] です。

次のようにコンパイルされることが望ましいはずです。

この構文は正しくありませんが、私の問題を解決するための提案はありますか?

で mixin を複数回定義しLESS、後でその mixin を次のように呼び出す場合

結果は、定義されたすべてのミックスインからの結合された出力になります

Sass と Stylus の両方で同じシナリオを適用すると (もちろん独自の構文を使用して)、スタイルシート全体で複数回定義された mixin を呼び出すと、最後に定義されたものだけが実行されます (以前に定義されたすべてをオーバーライドします)。ミックスイン ) は次のとおりです。

結果SassとStylus

LESS出力が最後に定義された mixin からのものになるようにmixin をオーバーライドするにはどうすればよいですか?

この mixin は、Bootstrap のヘルパー クラスを生成します。

ループを使用してこのミックスインを改善する方法があると確信しています。

さまざまな画面サイズに使用するスニペット:

PS私の最終的な解決策を見てください

翻訳ミックスインに値を追加するには? これらの値を Y 座標に配置したい:

ブートストラップ ミックスイン:

Y座標に50％を追加するにはどうすればよいですか??? 私が試してみました：

しかし、エラーが発生しました。アイデアはありますか???

Bootstrap 2 mixins .makeRow() および .makeColumn() を使用して、列 4、3、および 5 を作成しています。これは、12 幅の行全体に相当します。しかし、それは適切に適用されません。これは私が得たもののスクリーンショットです。

マークアップ:

以下：

誰でもこれを修正する方法を教えてもらえますか?

私を撃つ前に、私は完全に新しいものだと言わなけれlessばならないので、撃たないでください!! :)

私がやりたいのは、画面サイズに基づいてテキストを配置するためのクラスをいくつか書くことです。コードを手で書く代わりに、less（もちろん可能であれば）のループを使用して生成しますクラス。

だから私がやりたいことは次のようなものです：

しかし、すでに述べたように、手書きのコードを使用してそれを行うのは好きではありません。

では、必要なコードを生成するためにless、一種の配列またはハッシュを使用してループする方法はありますか?

配列またはハッシュにはleft、文字列、、、、のみが含まれている必要があります。rightcenterjustify

別のオプションとして、可能であれば、 、 、 のようsmにmd、画面サイズもループすることlgです。

どうもありがとう。

Less に次のコードがあります。

これはある種のミックスインでさらに抽象化できると確信していますが、しばらく頭を悩ませてきました。@xs や @xs-gutter などの変数を渡して、関数でコードをパディングできるようにしたいと考えています。

何か案は？