@media和 @font-face支持LEANSCSS

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查询与LISHCSS编译器的冲突。

谢谢！

Answer 1

据我所知，LeseCSS不支持@Media，您可能会在他们的GitHub主页上找到公开门票。

在您的情况下，我看到的唯一方法是：

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

---

自从公认的答案以来，看起来这个问题确实已经解决了。

Answer 2

上面的所有答案都过时了。

light.js and 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;
 }
}

请参考 LIST.JS文档 和 无点文档 了解更多信息。

Answer 3

如果您可以使用 少, ，它可以在开箱即用。我尝试了同一示例：

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

并且它在.css文件中重现了完全相同。 lys.js中也有一个逃生功能，但它似乎只能在价值观上，因此我认为您不能将其用于此功能。

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

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

Answer 4

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

从 要求更少拥抱响应式设计的呼吁

因此，是的，您可以立即使用媒体查询，但是您不能在嵌套语法中写下它们。

查看该博客文章的评论，以获取一些建议的解决方案，这些解决方案看起来会更快地滚动。

Answer 5

我们将其用于我们的项目，从未发现它起作用。

创建一个外部CSS文件，该文件的管理不多。较少的CSS文件将能够访问字体脸。

Answer 6

因此，我在以下引用中添加了一个简单的@media print {.no-print {display：none;}}。

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

而且它行不通。但是，我们的CSS Guru指出，.LESSES默认是使用媒体类型的屏幕类型，因此，如果您更改引用的链接，

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

然后突然在较少的文件中@Media打印将被拾取并根据正常情况开始工作。

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