LessCSS中的@media和@ font-face支持

Question

您好，有没有人知道如何使用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和任何与LessCSS编译器冲突的CSS3查询。

谢谢！

Answer 1

上述所有答案都已过时。

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。

Answer 2

据我了解，LessCSS不支持@media，您可以在github主页上找到打开的门票。

我认为这样做的唯一方法是：

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

---

看似问题已在LessCSS版本中修复，因为已接受答案。

Answer 3

如果您可以使用less.js，它就可以直接使用。我尝试了同样的例子：

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

它在.css文件中重现它完全相同。在less.js中还有一个转义功能，但它似乎只适用于值，所以我认为你不能用它。

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

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

Answer 4

  

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

来自A Call for LESS to Embrace Responsive Design

是的，您现在可以使用媒体查询，但不能用嵌套语法编写它们。

查看该博客帖子上的评论，了解一些建议的解决方案，看起来好像会在less.js中推出。

Answer 5

我们在项目中使用它，但从未发现它可以工作。

创建一个不受less管理的外部css文件。较少的css文件将能够访问font-face。

Answer 6

所以我在下面引用的.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打印将被接收并开始正常工作。

希望这可以帮助别人像我一样困惑。