@viewport、@media和更少

Question

我最近将一些CSS转换为LESS，以便与.NET应用程序一起使用(我正在为.NET使用dotless，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的一种粗俗方式

我如何“精简”这些代码块呢？

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中采用一种老套的方式，你也可以在LESS中采用一种老套的方式：

@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*/
}