较少的 CSS 解析错误：媒体定义需要块语句

Posted 2023-03-06

【中文标题】较少的 CSS 解析错误：媒体定义需要块语句

【英文标题】：less CSS parse error: media definitions require block statements

【发布时间】：2016-04-05 19:07:39

【问题描述】：

我正在使用 codekit 编译我的 Bootstrap LESS 文件，并且在媒体查询中不断收到此解析错误，而以前它是 CSS 文件时我没有收到。

“ParseError：媒体定义需要在第 568 行第 2 列 /assets/less/homepage.less 中的任何功能之后的块语句： 567 @media（最大宽度：@iphone_breakpoint） 568 "

这是完整的代码行：

/* Custom, iPhone Retina */ 
@media (max-width: @iphone_breakpoint) 

谁能解释这是怎么回事？

【问题讨论】：

你如何导入这个less文件？你是用（less）还是（inline）

我正在使用一个less文件作为主文件来导入多个要编译的less文件。一切都会进行，直到它到达最后一页的媒体查询，该页面恰好是 homepage.less

参考这个***.com/questions/34438723/…

使用（内联）编译导入文件，但不处理homepage.less中的变量或mixins

@iphone_breakpoint 中有什么内容？它是一个简单的值，即 480px 还是有保护？

【参考方案1】：

刚遇到这个错误，发现问题是一个简单的语法错误。我会发布对我有用的内容。

错误：

>> SyntaxError: media definitions require block statements after any
>> features in _assets/less/styles.less on line 144, column 2:
>>
>> 143
>> 144  div 
>> 145          .links 

请注意，错误显示该行在144-145 附近，我们将在下面看到

在下面的代码中，当twitter-bootstrap 使用内置的.hidden() mixin 时，我忘记了.（句点）。

这会输出错误：

SyntaxError: media definitions require block statements after any features in dir/bar/foo.less on line 144, column 2:

有点误导，因为错误是 149 线上的那个 div 中的一个孩子。

div                 // Line 144
    .links 
        .hidden();
    
    .other-links 
        // Missing `.` for using the mixin
        hidden();    // The real error is here on Line 149
    

总结：

确保在显示的错误指出错误的子项中没有语法错误。

在 mixin 之前检查缺少的句点。 hidden() -> .hidden() 检查所有其他错误?

发现另一个导致此错误的语法错误？告诉我们，在下方评论

【讨论】：

在我的情况下，它是一个杂散的 ')'，在 @media 查询中没有显示为语法错误。