Składnia LESS bez CSS użyteczne dla modernizatora

Question

Zazwyczaj używam modernizr, aby poznać możliwości przeglądarki. W tym samym czasie używam LESS CSS, aby moje css były bardziej czytelne i możliwe do utrzymania. Wspólny styl zużywając mniej zagnieżdżone reguły wygląda tak:

#header { 
    color: black; 

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

Następnie, jeśli mogę użyć modernizr stylu fall-back, I dodać ten tekst do poprzedniego bloku:

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

Tak, wygląda na to mam dwie gałęzie kodu i za każdym razem, gdy muszę sprawdzić inny aspekt zgodności, liczba braches będzie rosnąć. Ten kod jest mniej łatwy w utrzymaniu, ponieważ musisz znaleźć wszystkie style zastosowane do każdego elementu, a korzyść, którą otrzymujemy za pomocą klas zagnieżdżonych, znika.

Pytanie: czy w składni LESS jest sposób na uwzględnienie takich spadków i nie uruchamianie nowej gałęzi kodu dla .no-js i innych klas .no-smth?

Answer 1

Możesz teraz użyć operatora &, aby rozwiązać ten problem. Poniższa składnia powinna pracować w less.js, lessphp i dotless:

b { 
    a & { 
    color: red; 
    } 
} 

To jest kompilowany do:

a b { color:red; } 

Więc dla danego przykład można użyć następującej składni:

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

... który zostanie wkompilowany w:

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

Answer 2

Najlepszym sposobem, w jaki mogę się do tego podejść, jest posiadanie osobnego pliku .less dla tych działań awaryjnych. Myślę, że skończyłoby się to o wiele łatwiejsze w zarządzaniu, więc nie musisz obijać się o numer .no-rgba w wielu miejscach.

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

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

Próbowałem wymyślić rozwiązanie, jak chciałeś, ale nie miałem szczęścia.