sintaxis CSS menos útil para Modernizr

Question

Por lo general, yo uso modernizr para averiguar las capacidades del navegador. Al mismo tiempo, uso LESS CSS para hacer que mi CSS sea más legible y mantenible. estilo común el uso de reglas anidadas MENOS ve así:

#header { 
    color: black; 

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

Entonces, si uso Modernizr estilo de repliegue, añado este texto para el bloque anterior:

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

Por lo tanto, parece que tengo dos ramas de código, y cada vez que necesite verificar otro aspecto de compatibilidad crecerá la cantidad de braches. Este código es menos sostenible, porque debe buscar todos los estilos aplicados a cada elemento, y el beneficio que obtenemos al usar clases anidadas desaparece.

La pregunta: ¿hay alguna manera en la sintaxis LESS para incluir tales retrocesos y no comenzar una nueva rama de código para .no-js y otras clases .no-smth?

Answer 1

Ahora se puede utilizar el operador & para hacer frente a este mismo problema. La siguiente sintaxis debe trabajar en less.js, lessphp y dotless:

b { 
    a & { 
    color: red; 
    } 
} 

Esto se compila en:

a b { color:red; } 

Así, para el ejemplo dado se puede utilizar la siguiente sintaxis:

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

... que se compila en:

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

Answer 2

La mejor manera que puedo pensar para acercarse a ella es tener sólo un archivo .less separado para estos retrocesos. Creo que esto sería mucho más fácil de administrar, por lo que no tienes que buscar .no-rgba en muchos lugares.

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

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

Intenté encontrar la solución que deseabas pero no tuve suerte.