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＆gt; = 1.4.0中，您只需定义一个变量并在媒体查询中使用它：

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

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

在旧版本的LESS（＆lt; = 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*/}

在普通角色周围注入媒体查询的地方，这会在媒体块的末尾生成一个额外的选择器，但你可以将它用于有用的东西，这种技术可能会在more exciting instances中使用。媒体查询......但我只是想提一下。

在这种情况下，CSS输出看起来像：

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

@viewport，@ media和LESS

1 个答案: