@viewport,@ media和LESS

Question

我最近将一些CSS转换为LESS以用于.NET应用程序(我使用dotless for .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;
    }
}

仅供您参考,上面的媒体查询是一种针对IE的hacky方式

我怎么能"轻视"这些代码块呢？

Answer 1

在Less> = 1.4.0中,您只需定义一个变量并在媒体查询中使用它:

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

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

在旧版本的LESS(<= 1.3.3)中,您可能希望在变量中使用字符串字符串插值:

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

这应该会给你你想要的输出.

但是如果你想在CSS中采用hacky方式,你也可以在LESS中采用hacky方式:

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

在普通角色周围注入媒体查询的地方,这会在媒体块的末尾生成一个额外的选择器,但是你可以将它用于有用的东西,这种技术可能会用在比媒体查询更激动人心的实例中 ......但我只是想提一下.

在这种情况下,CSS输出看起来像:

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