@viewport, @media и LESS

Question

Я недавно преобразовал некоторые CSS в LESS для использования с .NET-приложением (я использую dotless для .NET, http://www.dotlesscss.org/ для компиляции LESS во время выполнения).

Компилятор падает на этих двух блоков кода:

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

Просто для справки, запрос СМИ выше, является Hacky способ ориентации IE

Как я могу «LESS-римента «Эти блоки кода?

Answer 1

В Less> = 1.4.0 можно просто определить переменную и использовать его в запросе СМИ:

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

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

В старых версиях LESS (< = 1.3.3), вы можете использовать строку строка интерполяции в переменной:

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

Это должно дать вам желаемый результат.

Но если вы хотите пойти Hacky путь в CSS вы можете также пойти на Hacky путь в LESS тоже:

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

где вы впрыснуть запрос СМИ вокруг нормальной роли, это создает дополнительный селектор в конце медиа-блока, но вы можете использовать его для чего-то полезного, этот метод может быть использован в more exciting instances, чем медиа-запросы ... но я просто хотел упомянуть об этом.

В этом случае вывод CSS будет выглядеть следующим образом:

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