Css @LESSCS中的媒体和@font-face支持

您好，有人知道如何使用LESSCS进行媒体查询吗

  @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和任何带有@conflict的CSS3查询都与LessCSS的编译器冲突

---

谢谢

据我所知，LessCSS不支持@media，你可以在他们的github主页上找到这方面的公开票证

我认为在你的情况下，唯一可行的方法是：

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

---

---

自接受答案以来，LessCSS版本中的问题似乎已得到解决。

我们在项目中使用它，但从未发现它起作用

创建不受less管理的外部css文件。更少的css文件将能够访问字体。

如果您可以使用，它将立即工作。我试过同样的例子：

@media screen and (max-width: 600px) {
    #container{
        width: 480px;
    }
}

它在.css文件中完全复制了它。less.js中还有一个转义功能，但它似乎只对值起作用，所以我不认为您可以将其用于此

body {
    color: e('red');
}

我猜你使用的是原始的Ruby LessCSS？如果你不能切换到新的，我唯一能想到的就是使用@include。这可能比HTML中的另一个链接标记稍微好一点，如果压缩所有CSS文件，就可以避免额外的HTTP请求

LESS目前不为媒体查询提供任何特殊支持。这意味着不可能在LESS的嵌套规则中嵌入媒体查询，迫使开发人员将其响应样式存储在LESS文档的一个单独部分中，而不是保存在上下文中。让我举一个例子说明它是如何工作的：

从

因此，可以立即使用媒体查询，但不能使用嵌套语法编写查询

---

查看该博客帖子上的评论，了解一些建议的解决方案，这些解决方案看起来很快就会在更少的.js中推出。

以上所有答案都过时了

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文件中添加了一个简单的@media print{.no print{display:none；}}}：

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">

这是行不通的。然而，我们的css专家指出.lesses默认使用媒体类型的屏幕，所以如果您将引用较少的链接更改为

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

然后突然，更少文件中的@media打印将被拾取，并按正常方式开始工作

---

希望这能帮助像我一样困惑的其他人。

我很感激这个答案，但我听说这是可能的，但没有人能给出一个例子。正如您在上面指出的，这是一个简单的解决方法，我们也可以只添加一个不少于css的文件，但这并不是奖励的真正意义。：）见下文@Colin的答案。我可以证明，LESS 1.5.5.js确实支持开箱即用的媒体查询，因为它们没有被剥离。它们不能在嵌套规则中使用。这取决于你所说的“支持”是什么意思。谢谢Robbles，我一直在LessCSS的网站上抱怨，看起来我不是唯一一个有这个愿望的人。事实证明，RubyGem中也缺少父选择器，但js版本中也有。他们似乎放弃了ruby gem…+1，因为你可以在一个更少的样式表中使用

@media

，你只需要确保它是最外层的元素。这可以避免您加载过多的文件。需要到顶部，这是正确的，上面有很多旧文件。他们可能已经添加了该功能，但链接的项目都没有在当前文档中引用该功能。还是我遗漏了什么？@IMSop:现在在“语言”下有一个“嵌套媒体查询”部分