Używanie zestawu klas w zapytaniu o media jako mixin w mniej

Question

Próbuję ponownie użyć zestawu klas ustawionego w zapytaniu o media jako mixins do użycia w witrynie zamiast osadzania nie-semantycznych nazw klas w html.

Oto przykład mojego problemu.

@media (min-width: 1000px) { 

    .foo{width:120px;} 
    .foo-2{width:150px;} 
} 
@media (max-width: 999px) { 

    .foo{width:110px;} 
    .foo-2{width:120px;} 
} 

.bar{.foo;} 
.bar-2{.foo;} 
.bar-3{.foo-2;} 

.bar-X nigdy nie zostanie zastosowany żaden styl. Mogę się domyślić, że tak się dzieje, ponieważ LESS nie tworzy .bar-X wewnątrz zapytań o media, więc nic nie zostanie zastosowane.

Czy jest to błąd w LESS, czy coś, czego nigdy nie osiągnę? Obejście tego byłoby idealne.

Answer 1

Twój problem jest częstym błędnym przekonaniem. LESS nie przetwarza procesu zapytania @media, przeglądarka wykonuje po tym, jak LESS wykonał swoją pracę. LESS może tylko utworzyć kod CSS, który przeglądarka odczyta. Tak więc @media jest "bez znaczenia" dla LESS, to jest tak jak każdy inny selektor (.someClass div table, itp.), To tylko przetwarza to, co @media ma obsługiwać w przeglądarce.

Oznacza to, że musisz umieścić cały kod, który zmienia się na @media w bloku @media. Ale ty też nie chcesz wielu powtarzających się kodów. Więc zamiast tworzyć mixin główny ustawić swój kod @media, a następnie wywołać tę wstawek z zapytań mediów:

.makeFooGroup(@w1, @w2) { 
    .foo {width: @w1} 
    .foo-2{width: @w2} 
    .bar{.foo} 
    .bar-2{.foo} 
    .bar-3{.foo-2} 
} 

@media (min-width: 1000px) { 
    .makeFooGroup(120px, 150px); 
} 
@media (max-width: 999px) { 
    .makeFooGroup(110px, 120px); 
} 

Wytwarza to CSS:

@media (min-width: 1000px) { 
    .foo {width: 120px;} 
    .foo-2 {width: 150px;} 
    .bar {width: 120px;} 
    .bar-2 {width: 120px;} 
    .bar-3 {width: 150px;} 
} 
@media (max-width: 999px) { 
    .foo {width: 110px;} 
    .foo-2 {width: 120px;} 
    .bar {width: 110px;} 
    .bar-2 {width: 110px;} 
    .bar-3 {width: 120px;} 
} 

dla niektórych dalszych informacji Dałam na mniej i @media podobne do tego, patrz:

1. CSS pre-processor with a possibility to define variables in a @media query
2. Media Query grouping instead of multiple scattered media queries that match