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

谢谢！

score 37 · Accepted Answer

以上所有答案都已过时。

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 文档和dotless 文档以获取更多信息。

score 7 · Accepted Answer

据我了解，LessCSS 不支持@media，你可以在他们的 github 主页上找到公开的票。

我看到这个在你的情况下工作的唯一方法是：

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

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

score 3 · Accepted Answer

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

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

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

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

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

score 2 · Accepted Answer

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

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

查看该博客文章中的评论，了解一些建议的解决方案，这些解决方案看起来迟早会在 less.js 中推出。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

因此，我在以下引用的 .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 打印将被拾取并开始正常工作。

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

6 回答 6