對於modernizr很有用的LESS CSS語法

Question

通常我使用modernizr來查找瀏覽器功能。同時，我使用LESS CSS使我的CSS更具可讀性和可維護性。使用較少的嵌套規則常見的款式看起來是這樣的：

#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; 
    } 
} 

因此，它看起來像我有兩個代碼分支，每次我需要檢查另一個兼容性方面時，分支的數量將會增長。此代碼不易維護，因爲您必須查找應用於每個元素的所有樣式，並且使用嵌套類獲得的好處消失。

問題：在LESS語法中是否有一種方法可以包含這樣的後備，而不是爲.no-js和其他.no-smth類啓動一個新的代碼分支？

Answer 1

您現在可以使用&運算符來解決這個問題。以下語法應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; 
} 

Answer 2

我認爲接近它的最好方法是爲這些回退單獨擁有一個單獨的.less文件。我認爲這最終會更容易管理，所以你不必在很多地方啄食.no-rgba。

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

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

我確實試過想出一個解決方案，你是怎麼想的但我沒有運氣。