css - Sass：为什么我不能在@import（在同一行）之后发表评论？

Question

@import "foo" // Bar

...导致Invalid CSS after ""foo" ": expected media query list, was "// Bar". 为什么？

感谢您的解释。

Answer 1

1. CSS 规范将@import 规则定义为

   <import-rule> = @import [ <url> | <string> ] <media-query-list>? ;
   

   这意味着@import后跟一个字符串或一个 url，后跟一个可选的媒体类型列表

2. 在Sass 语法中，注释必须在自己的行中

   与缩进语法中的所有其他内容一样，注释是基于行的。这意味着它们的工作方式与 SCSS 不同。它们必须占据一整行，并且它们还包含嵌套在它们下面的所有文本。

解析器需要一个媒体类型列表，找到一个与内容混合的评论并阻塞它。

您将不得不在 Sass 语法中拆分评论和内容：

 // Bar
 @import "foo"

Answer 2

你可以试试

@import "foo"; // Bar

实际上，您的变量声明后缺少分号。