@viewport, @media i LESS

Question

Niedawno przekonwertowałem trochę kodu CSS na LESS do użycia z aplikacją .NET (używam bezkresnego dla .NET, http://www.dotlesscss.org/ do kompilacji LESSa w czasie wykonywania).

Kompilator spada na tych dwóch bloków kodu:

@viewport { 
    width: device-width; 
} 
/* Add a min-width for IE 8 and lower */ 
@media \0screen\,screen\9 { 
    body { 
     min-width: 960px; 
    } 
} 

tylko w celach informacyjnych, zapytanie powyżej mediów jest hacky sposób kierowania IE

Jak mogę „mniej-instalacji potwierdza "te bloki kodu?

Answer 1

w mniej> = 1.4.0 można po prostu zdefiniować zmienną i używać go w zapytaniu mediów:

@iehack: \0screen\,screen\9; 

@media @iehack { 
    body { 
     min-width: 960px; 
    } 
} 

w starszych wersjach mniej (< = 1.3.3) możesz użyć ciąg interpolacja ciągów w zmiennej:

@iehack: ~'\0screen\,screen\9'; 

To powinno dać pożądaną wydajność.

Ale jeśli chcesz przejść hacky sposób w CSS można również przejść hacky sposób w mniej też:

@themedia: ~"@media \0screen\,screen\9 {"; 
@aftermedia: ~"} after"; 
@{themedia} { 
    body { 
     min-width: 960px; 
    } 
} 
@{aftermedia}{/*just to add the closing bracket to media*/} 

gdzie wstrzyknąć zapytania mediów wokół normalnej roli, to generuje dodatkowy przełącznik na końcu bloku multimediów, ale możesz go użyć również do czegoś użytecznego, technika ta może być używana w more exciting instances niż w zapytaniach o media ... ale chciałem tylko o tym wspomnieć.

W tym przypadku wyjście CSS wyglądałby następująco:

@media \0screen\,screen\9 { 
body { 
    min-width: 960px; 
} 
} 
after { 
    /*just to add the closing bracket to media*/ 
}