您好，有人知道如何使用 LessCSS 进行媒体查询吗？
@media screen and (max-width: 600px) {
#container{
width: 480px;
}
}
给我以下错误：
! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:
@media screen and
同样，@font-face 和任何带有 @ 的 CSS3 查询与 LessCSS 的编译器冲突。
谢谢！
【问题讨论】：
标签： css less media-queries
据我了解，LessCSS 不支持@media，你可以在他们的 github 主页上找到开放票。
我认为在您的情况下唯一可行的方法是：
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />
自接受答案以来，LessCSS 版本中的问题似乎已得到修复。
【讨论】：
所以我在以下引用的 .less 文件中添加了一个简单的 @media print { .no-print {display:none;}}：
<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">
它不会工作。但是，我们的 css 大师指出 .lesses 默认是使用媒体类型的屏幕，所以如果您将引用的 less 链接更改为
<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">
然后突然间，less 文件中的@media 打印将被拾取并开始正常工作。
希望这可以帮助像我一样困惑的其他人。
【讨论】：
以上所有答案都已过时。
less.js 和lessCss/dotless 都支持@media 和@font-face。
它们现在还支持带有嵌套规则的@media，例如
.cl {
@media screen and (max-width: 600px) {
.d {
.e {
background: none;
}
}
}
}
变成
@media screen and (max-width: 600px) {
.cl .d .e {
background: none;
}
}
请参阅less.js documentation 和dotless documentation 了解更多信息。
【讨论】：
LESS 目前不为媒体查询提供任何特殊支持。这意味着在 LESS 的嵌套规则中嵌入媒体查询是不可能的，这迫使开发人员将他们的响应式样式单独放置在 LESS 文档的单独部分中，而不是将它们保留在上下文中。让我举一个例子说明它是如何工作的：
来自A Call for LESS to Embrace Responsive Design
所以是的，您现在可以使用媒体查询，但不能用嵌套语法编写它们。
查看该博客文章中的 cmets，了解一些建议的解决方案，这些解决方案看起来迟早会在 less.js 中推出。
【讨论】：
@media，你只需要确保它是最外层的元素。这可以避免您加载不必要的文件。
如果您可以使用less.js，它可以直接使用。我尝试了同样的例子：
@media screen and (max-width: 600px) {
#container{
width: 480px;
}
}
它在 .css 文件中完全复制了它。 less.js 中还有一个转义功能，但它似乎只对值起作用，所以我认为你不能为此使用它。
body {
color: e('red');
}
我猜你使用的是原始的 Ruby LessCSS？如果你不能切换到新的，我唯一能想到的另一件事就是使用@include。这可能比 HTML 中的另一个链接标签稍好，如果您压缩所有 CSS 文件，您可能能够避免额外的 HTTP 请求。
【讨论】：
我们在项目中使用它，但从未发现它可以工作。
创建一个不受less管理的外部css文件。 less css 文件将能够访问字体。
【讨论】：