問題タブ [less-mixins]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
less - LESS の可変 mixin 名は可能ですか?
私がやりたいことは、引数を取り、1 つ以上の引数を他の mixin を含めるための名前として使用する mixin を作成することです。
適切な用語がわからないので、例を挙げて説明します。
画像は機能しますが、から適切な色を参照する方法をまだ理解していません@gradients
。これはまったく可能ですか?
less - ミックスインで複数のプロパティが個別の引数として扱われる
ミックスインを作成しようとしていますが、引数を希望どおりに動作させることができないようです。複数のプロパティがそれぞれ個別の引数として扱われています。
現在のコード
望ましい出力
実際の出力
何か案は?
less - 複数の変数とのミックスインが少ない
LESSで複数の変数を使用してミックスインを作成しようとしていますが、何らかの理由で機能していません。私はこれを少なくしています:
私はそれをこのように呼びます:
しかし、私は自分の要素の背景をまったく理解していません。私の構文は大丈夫ですか?
less - 別の mixin を呼び出す LESS mixin
私はlessphpを使用しています(gitの最新)
同じ「名前空間」内の別の mixin から mixin を呼び出すことは可能ですか?
出力を生成しないコードの短いサンプルを次に示します (ただし、h1 に境界線を付ける必要があります)。
less - ミックスインパラメータのデフォルト値
私は次のようなフォントにミックスインを使用しています:
最後のパラメーターであるスタイルのみを変更してこれを呼び出したいのですが、他の値はデフォルトのままにしておきます。たとえば、次のように書く代わりに:
私は次のようなものを書きます:
(これは実際には機能しますが、間違った理由で疑われます-またはとにかくそれは適切な構文ではないようです)これを達成するための最良の方法は何ですか?
css - LESS CSS - mixin 内の変数の設定
最近、 LESS CSSを使い始めました。これは素晴らしいです (まだ試していない場合は、チェックすることをお勧めします)。
私は次のことをしたいプロジェクトに取り組んでいます(これは適切な構文ではなく、私の問題を説明しようとするだけです):
@background_color
これにミックスインを使用できることはわかっていますが、上記の方法を使用すると、変数に基づいて色を変更する必要があるたびにミックスインを作成する必要がなくなります (@secondary_color
境界線、背景色などに使用するため)。
私は解決策を見つけようとしてきましたが、運がありませんでした。この作業を行うために私に何ができるかについて誰かアイデアがある場合は、ぜひ聞いてみたい.
ありがとう!
css - 別のセレクター/クラス内にネストされたミックスインを使用する
コンテキストに基づいて、Mixin 出力を 2 つの異なるものにしようとしています。そのようです:
.seticon
期待どおりに動作するようになりましたが、.nonreceivable .seticon
動作していないようです。これはバグですか、それとも私が何か間違ったことをしているのですか、それとも Less の開発者が意図したものではありませんか? 代わりに、これをどのように解決しますか?
css - LESS ミックスインを定義して、可変数のパラメーターを持つ遷移プロパティを生成できますか?
CSS を簡素化するために、大規模な Web アプリ プロジェクトに LESS を導入しています。さまざまな数のプロパティにトランジションを適用するいくつかの CSS ルールがあります。たとえば、次のようになります。
-webkit
(注: ここでは、簡潔にするために-moz
とプロパティを省略しまし-o
た。実際には、これらの各ルールは 3 行ではなく 12 行の長さです。)
の値transition-property
はコンマで区切られていることに注意してください。これは CSS では珍しいことです。通常、複数の値はスペースで区切られます ( のようにborder: 1px solid #f00
)。LESS ミックスインは特別な@arguments
値を使用して、すべてのミックスイン引数のスペース区切りのリストを生成できますが、可変数のパラメーターを取り、それらをカンマ区切りの値リストに変換する LESS ミックスインを定義することは可能transition-property
ですか?
必要に応じて、2 つの mixin を必要とするソリューションに満足してtransition-property
いtransition-duration
ますtransition-timing-function
。これが私がこれまでに試したことです:
試行 1: 名前のないパラメーターで @arguments を使用する
結果: LESS エラー (「'.transition-property(top, left)' に一致する定義が見つかりませんでした」)
試行 2: 名前付きパラメーターで @arguments を使用する
結果: LESS エラー (「'.transition-property(top, left)' に一致する定義が見つかりませんでした」)
試行 3: ダミーのデフォルト値を持つ名前付きパラメーターを使用する
結果: LESS エラーは発生しませんが-webkit-transition-property: top, left, p3, p4, p5
、プロパティが認識されないためにブラウザーが無視する CSS ルールが生成されます。
私は他のさまざまなアプローチを試しました (たとえば、プロパティを string として渡す'top,left'
) が、すべて同じ結果になります: LESS エラーまたは無効な CSS のいずれかです。
これを回避する方法はありますか?それとも、弾丸を噛んで、アリティにオーバーロードされた一連のミックスインを定義する必要がありますか?
less - プロパティ名を引数としてミックスインに渡す方法
すでに暗い場合は色を暗くし、明るい場合は明るくする関数/ミックスインを作成したい(正規化/極端化?)
プロパティ名(color、background-color、border-right-colorなど)を渡すことでこれを行うことはできますか?
less - Mixin で必要なパラメータのみを上書きする
簡単な質問です。私は CSS 構築のために less を探し始めたばかりで、次のジレンマに遭遇しました。
ミックスインの 1 つのパラメーターの一部をオーバーライドしたいだけですが、これは適切な構文ではないようです。