問題タブ [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.
css - LESS CSS - Mixin Arguments と Nth-Child - ループなし
ID #p0x1 に関連付けるより少ない引数を記述しようとしています。のような引数を書けるようにしたい
次に、各 ID にその引数値を指定します。
ただし、nth-child css ではこれを行うことができません。この問題をループで解決するソリューションしか見たことがありません。このようにこれにアプローチするより直接的な方法はありますか？
ここに私が現在持っているコードがあります。
less - LESS: 複数のバックグラウンド ルールを連結する
ベンダーのプレフィックスでグラデーションを作成する mixin があり、この背景を別の に加えて DIV に追加したいと考えていbackground-imageます。
私の例では、標準のCSS3グラデーション宣言にのみ追加したコンママージを使用することで解決できると思いました。これを行うと、生成された CSS は次のようになります。
それは正しいですが、ミックスインの柔軟性を失うことなく、他のベンダーのプレフィックスにもこれを持たせるにはどうすればよいですか? +他の " " ルールにも記号を追加しようとしましbackground-image: -webkit....たが、この場合、結果の CSS は次のようになります。
...明らかに正しくありません... 何か提案はありますか?
css - mixin でホバー状態をトリガーする
デフォルト状態とホバー状態の Less mixin があります。ここで、親要素にカーソルを合わせているときに、ミックスインでホバー状態を有効にする必要があります。
以下
HTML:
settingsIcon ホバーで発生するのと同じ効果が、ボタン ホバーでもトリガーされるようにする必要があります。hoverだから私はこのようなことをする必要があると思いますsettingsIcon。このようなもの（有効なLessコードではありません）
どうすればいいですか？
for-loop - LESS: LOOP 内の連想配列
コンテンツに応じて、ページにアイコンを追加する必要があります。つまり、ページに画像、ギャラリー、ビデオが含まれている場合は、その性質を示すアイコンを追加します。
これを行うには、bodyタグに CSS クラスを追加し、子孫セレクターを使用して適切な位置にアイコンを追加します。
明らかに、このタスクは CSS で多くの繰り返しコードになるため、 LESS Loopで生成したいと考えています。
ここで私の実際の試み（アイコンはアイコンフォントです）：
このような他の同様の質問からインスピレーションを得て、これを書きました。
それはうまくいきますが、2 つの理由から、まだ私が本当に望んでいるものではないことを認めます。
@iconsアイコンエンティティを宣言するための変数と、.icons異なるページタイプを宣言するためのミックスインの現在の必要性は、不均一なタイプのため、それほど直感的ではないと思います。一貫性のために、両方の宣言でLESS変数を使用できる方が良いはずです- ページタイプと相対アイコンの間の対応を同じ場所で宣言できる、一種の連想配列を書く方が確実に良いでしょう。このようなもの：
@page-type: image, "\e926"; gallery, "\e90e"; video, "\e914";
何か案は？
css - Less は算術式を計算しません
私はこのコードで作業しています:
コンパイルは問題ありませんが、Chrome でコードを調べると@result、数値ではありません (NaN%) と表示されます。
PS: http://lesstester.com/でこのコードを試してみると、問題なく動作するので、少し混乱しています。
css - LESS デタッチド ルールセット vs ノンパラメトリック ミックスイン
切り離されたルールセットの間に実質的な違いはありますか?
ノンパラメトリックミックスイン？例えば
ネストされた演算子と同じように動作しますか?
最も明白な違いは構文 (ルールセットにはセミコロンが必須) であり、ルールセットは変数をプライベートに保ちますが、私が見つけたのはそれだけです。マニュアルでは、その詳細についてはあまり詳しく説明されていません。
less - mixin 値を制限し、無効な値が指定された場合は例外をスローします
次の Less mixin があります。
'border-box' と 'content-box' の値のみをパラメーターとして許可したいと思います。そうしないと、Less エンジンが例外をスローする必要があります。どうすればこれを達成できますか？この検証がなくても、ミックスインに任意の値を書き込むことができ、機能しますが、無効な CSS も生成され、エラーがあることに誰も気付かないからです。
css - ネストされたメディア クエリの出力
私は最近 SASS から Less (作業) に切り替えましたが、この出力を Less から (ミックスインを使用して) 取得できるかどうか疑問に思っていました:
（セレクターの下ではなく）次のように、個別のブレークポイントでのみ出力を取得できるようです。
これは私が使用しているミックスインです:
そして、それを次のように使用します：
どんな助けでも大歓迎です！