5

我最近将一些 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 的一种骇人听闻的方式

我怎样才能“减少”这些代码块？

4

1 回答 1

9

在 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*/
}
于 2013-07-17T12:38:26.627 回答