問題タブ [less-mixins]

私は次の問題について頭を壊します。Web サイトでBootstrap 3 vendor-prefixes.lessを使用して、CSS プレフィックスを生成しています。

次のコードを生成したい:

次の mixin を使用します。

しかし、Less コンパイラは毎回次のエラー メッセージを表示します。

誰がこれを引き起こす可能性があるか考えていますか?

簡単な例から始めます。

結果:

しかし：

結果:

.otherClassコンパイラがin を含めない理由がわかりません.classB。両方のclassA定義が等しいということですね。

奇妙な動作の簡単な説明はありますか? 特に、.otherClassミックスインを介して含める方法はありますか、それともコードをコピーする必要がありますか?

幅に応じて異なる mixin を持つことは可能ですか? それを機能させる方法は？

例えば

ありがとうございました

cms の入力に応じてページの色を変更できるようにする必要があるデザインがあります。

これを行うには、1 つのクラスを含む div に追加し、その周囲のクラスに従って色を変更します。

決まった色数になります。（8、だと思います。まだ決まっていません。）

私の考えは、これを達成するために mixin を使用することでした。例えば。

HTML の例

LESS ミックスインの例

例 LESS

問題

問題は、モバイル版の特異性がデスクトップ版よりも高いことです。

レンダリングされた CSS の例

この問題は、ページの残りの部分に影響します。重要なタグをあちこちに貼り付けずに、探しているものを達成するためのより良い方法はありますか?

________________編集________________

明確にするために、私が構築しているサイトでは、特定の層のログイン ユーザーが自分の個人ページのメインの色を変更できるようにします。色の数はクライアントに決定してもらう必要がありますが、約 8 になると思います。代わりにそれらのそれぞれを書き出すか、それぞれに個別のスタイルシートを用意します (それを維持するのは恐ろしいことです)。私はそのための Mixin を作成することにしました。複数の背景色とテキスト色を変更する必要があり、設計上、モバイル デスクトップとタブレットでは別の色に変更する必要があります。

ブラウザーの幅に基づいてテキストのサイズを変更する LESS コードをいくつか作成しました。複数の異なる要素とそのパラメーターを再利用可能な mixin に送信できます。

すべてのオンライン LESS コンパイラは、目的の結果を出力します。しかし、Squarespace の LESS コンパイラからは異なる出力が得られます。

Squarespace のコンパイラは、2 回目に呼び出されたときに古い変数値に「ハングアップ」しているように見えます。

Squarespace の LESS コンパイラがどのように出力に到達しているかを確認できますか?もしそうなら、出力を他のすべてのコンパイラと一致させるために行うことができる変更を共有できますか?

オンライン コンパイラからの出力: (望ましい)

Squarespace コンパイラからの出力: (望ましくない)

LESS ソース コードとLess2Css.org のコードへのリンク:

Squarespace は LESS 1.3.3 を使用しているため、手動で Less2Css をそのバージョンに切り替える必要があることに注意してください (ただし、変更しない場合は何も変更されないようです)。

高度にカスタマイズ可能なボタン mixin を作成しようとしています。たとえば、クライアントが .less ファイルにアクセスして次のように記述できるようにしたいと考えています。

現在、私の.btn(...)mixin では、Less mixin ガードを正しく組み込んで、自分のやりたいことを実行する方法を見つけようとしています。

以下のように書けると思います。

しかし、これは非常に非効率的で冗長に思えます。クライアントに複数の mixin 呼び出しを行わせることなく、本当にカスタマイズ可能な mixin を許可するより良い方法はありますか? 電話するだけでこれができるようになりたい.btn(...)

IE9 ハック セレクターを作成するためのルール セットを含む LESS ミックスインがあります。

ハックソース: http://browserhacks.com/#hack-e6b158b7e27bcb157326348efb5c0bb2

しかし、コンパイルした後、次のように表示されます。

LESSでこれを修正するには？

ページのレイアウトを準備していて、Bootstrap 3 を使用する必要があります。グラデーション付きのボタンがあるので、Bootstrap mixin を使用したかったの#gradient.horizontalです。

しかし、コンパイルタスクを実行すると解析エラーが発生しました:

私はブートストラップレスv:3.3.8を使用しており、main.lessファイルでブートストラップ全体をインポートしています@import "bootstrap/index";

それを解決する方法のヒントをいただければ幸いです

プロパティがあり@keyframes、必要なプレフィックスを追加するために autoprefixer でコンパイルしました。

私がやりたいことは、プロパティの値をキーフレーム キーに変更するために、アニメーション名 (または可能な限り) に引数を追加することです。

これは私が今持っているものです:

そして基本的に私がやりたいこと：