css - modernizrに役立つLESSCSS構文

Question

通常、私はブラウザの機能を見つけるためにmodernizrを使用します。同時に、私はLESS CSSを使用して、cssをより読みやすく保守しやすくしています。LESSネストルールを使用する一般的なスタイルは次のようになります。

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

次に、modernizrスタイルのフォールバックを使用する場合は、前のブロックに次のテキストを追加します。

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

したがって、コードのブランチが2つあるように見えます。別の互換性の側面を確認する必要があるたびに、ブランチの数が増えます。すべての要素に適用されているすべてのスタイルを見つける必要があり、ネストされたクラスを使用して得られる利点がなくなるため、このコードは保守性が低くなります。

質問：LESS構文にそのようなフォールバックを含め、.no-jsおよびその他の.no-smthクラスの新しいコードブランチを開始しない方法はありますか？

score 20 · Accepted Answer

&これで、演算子を使用してこの問題に対処できます。次の構文は、less.js、lessphp、およびdotlessで機能するはずです。

b {
  a & {
    color: red;
  }
}

これは次のようにコンパイルされます。

a b { color:red; }

したがって、与えられた例では、次の構文を使用できます。

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

...これは次のようにコンパイルされます：

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

score 1 · Accepted Answer

私がそれにアプローチするために考えることができる最善の方法は、これらのフォールバック用に別の.lessファイルを用意することです。これは管理がはるかに簡単になると思うので.no-rgba、多くの場所でいじくり回す必要はありません。

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

私はあなたが望む方法で解決策を考え出そうとしましたが、運がありませんでした。

2 に答える 2