MOINS syntaxe CSS utile pour modernizr

Question

Habituellement, j'utilise modernizr pour connaître les capacités du navigateur. En même temps, j'utilise LESS CSS pour rendre mon css plus lisible et maintenable. style commun en utilisant moins de règles imbriquées ressemble à ceci:

#header { 
    color: black; 

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

Ensuite, si j'utilise le style Modernizr automne-back, ajouter ce texte pour le bloc précédent:

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

, il semble donc que j'ai deux branches de code, et chaque fois que j'ai besoin de vérifier un autre aspect de la compatibilité, le nombre de braches va augmenter. Ce code est moins maintenable, car vous devez trouver tous les styles appliqués à chaque élément, et le bénéfice que nous obtenons en utilisant les classes imbriquées disparaît.

La question: existe-t-il un moyen dans la syntaxe LESS d'inclure de telles retombées et de ne pas démarrer une nouvelle branche de code pour .no-js et d'autres classes .no-smth?

Answer 1

Vous pouvez maintenant utiliser l'opérateur & pour résoudre ce problème. La syntaxe suivante doit fonctionner dans less.js, lessphp et dotless:

b { 
    a & { 
    color: red; 
    } 
} 

C'est compilé dans:

a b { color:red; } 

Ainsi, pour l'exemple donné, vous pouvez utiliser la syntaxe suivante:

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

... qui serait compilé en:

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

Answer 2

La meilleure façon que je peux penser à l'approche est de simplement avoir un fichier .less distinct pour ces solutions de repli. Je pense que cela se terminera beaucoup plus facile à gérer, donc vous n'avez pas besoin de picoter pour .no-rgba dans beaucoup d'endroits. J'ai essayé de trouver une solution comme vous le vouliez, mais je n'ai pas eu de chance.