非セマンティックなクラス名を HTML に埋め込むのではなく、メディア クエリ内に設定された一連のクラスをミックスインとして再利用して Web サイト全体で使用しようとしています。
これが私の問題の例です。
@media (min-width: 1000px) {
.foo{width:120px;}
.foo-2{width:150px;}
}
@media (max-width: 999px) {
.foo{width:110px;}
.foo-2{width:120px;}
}
.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}
.bar-X にスタイルが適用されることはありません。これは、LESS がメディア クエリ内で .bar-X を作成しないため、何も適用されないために発生していると推測できます。
これは LESS のバグですか、それとも決して達成できないものですか? これに対する回避策は理想的です。
あなたの問題はよくある誤解です。LESS はクエリを処理しません。ブラウザーは、LESS が作業を行った後に処理します。LESS は、ブラウザーが読み取るCSS コードのみを作成できます。したがって、は LESS にとって「無意味」であり、他のセレクター (など) と同様に、 がブラウザーに提供するものだけを処理します。@media@media.someClass div table@media
つまり、 のために変更するすべてのコードをブロックに入れる必要があり@mediaます@media。しかし、繰り返されるコードの束も必要ありません。代わりに、マスター mixin を作成して@mediaコードを設定し、メディア クエリからその mixin を呼び出します。
.makeFooGroup(@w1, @w2) {
.foo {width: @w1}
.foo-2{width: @w2}
.bar{.foo}
.bar-2{.foo}
.bar-3{.foo-2}
}
@media (min-width: 1000px) {
.makeFooGroup(120px, 150px);
}
@media (max-width: 999px) {
.makeFooGroup(110px, 120px);
}
次の css を生成します。
@media (min-width: 1000px) {
.foo {width: 120px;}
.foo-2 {width: 150px;}
.bar {width: 120px;}
.bar-2 {width: 120px;}
.bar-3 {width: 150px;}
}
@media (max-width: 999px) {
.foo {width: 110px;}
.foo-2 {width: 120px;}
.bar {width: 110px;}
.bar-2 {width: 110px;}
.bar-3 {width: 120px;}
}
私が LESSについて提供@mediaした、これに関連する詳細情報については、以下を参照してください。