LESS CSS syntax for modernizr

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つのコード枝があり、別の互換性の側面を確認する必要があるたびに、枝の数が増えます。このコードは、すべての要素に適用されるすべてのスタイルを見つけなければならず、ネストされたクラスを使用して得られる利点がなくなるため、保守が容易ではありません。

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

Answer 1

&演算子を使用して、この問題に対処できるようになりました。次の構文はless.js、lessphp、およびdotlessで動作するはずです：

b { 
    a & { 
    color: red; 
    } 
} 

これがにコンパイルされています

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

：与えられたたとえば、あなたが次の構文を使用することができ、そう

a b { color:red; } 

...コンパイルされるもの：

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

Answer 2

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

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

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

私はあなたがそれを望んでいた方法を試してみましたが、私は運がなかった。