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

Posted 2023-03-06

【中文标题】LessCSS 中的@media 和 @font-face 支持

【英文标题】：@media and @font-face support in LessCSS

【发布时间】：2011-05-27 08:17:21

【问题描述】：

您好，有人知道如何使用 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 的编译器冲突。

谢谢！

【参考方案1】：

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

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

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

---

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

【讨论】：

我很欣赏这个答案，但我听说这是可能的，但没有人能举个例子。正如您在上面指出的，这是一个简单的解决方法，我们也可以只添加一个非少 css 文件，但这并不是赏金的真正意义。 :)

见下面@Colin 的回答。我可以证明 LESS 1.5.5.js 确实支持开箱即用的媒体查询，因为它们没有被剥离。它们只是不能在嵌套规则中使用。所以这取决于你所说的“支持”是什么意思。

【参考方案2】：

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

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

【参考方案3】：

以上所有答案都已过时。

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 了解更多信息。

【讨论】：

需要顶一下，这个是对的，上面好多老的。

他们可能已经添加了这个功能，但是链接的项目都没有在他们当前的文档中引用它。还是我错过了什么？

@IMSop:lesscss.org 现在在“语言”下有一个“嵌套媒体查询”部分。

【参考方案4】：

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

来自A Call for LESS to Embrace Responsive Design

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

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

【讨论】：

+1 因为你可以在 LESS 样式表中使用@media，你只需要确保它是最外层的元素。这可以避免您加载不必要的文件。

【参考方案5】：

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

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

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

body 
    color: e('red');

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

【讨论】：

感谢 Robbles，我一直在 LessCSS 的网站上抱怨，看来我不是唯一一个有这个愿望的人。事实证明，Ruby gem 中也缺少父选择器，但在 js 版本中可用。似乎他们放弃了红宝石......

【参考方案6】：

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

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