Question

我需要在css文件中包含一些非css解释器指令（稍后将在运行时由另一个解析器替换它们以创建有效的css）。

该文件是用scss编写的，所以我使用ruby / node sass来编译文件。在这个过程中，我希望它保持解释器指令不受影响，即它们应该被简单地视为文字并输出。这些说明包含在css中无效的符号，因此here给出的答案对我不起作用。

什么工作正常是在属性值中引用包含insruction的变量时，例如这成功编译：

$x: unquote("<<macro 'val1'>>");

a {
  b: $x; // compiles into:  b: <<macro 'val1'>>
}

这失败了：

$x: unquote("<<macro 'val1'>>");

@media (max-width: #{$x}) { // throws an invalid css error
  .tc-sidebar-scrollable {
    .tmap-desktop-editor {
      display: none;
    }
  }
}

在这两种情况下，输出都不是有效的css，但是在媒体查询的情况下，它完全失败。我的Sass版本是3.4.13（选择性史蒂夫）。

我怎样才能让它发挥作用？生成的文件应如下所示：

@media (max-width: <<macro 'val1'>>) {
  .tc-sidebar-scrollable .tmap-desktop-editor {
    display: none;
  }
}

Answer 1

我在sass GitHub repo和cross post做了was told，在解析媒体查询之前插值发生了，这就是为什么它在这里不起作用。

came up in the issue discussion使用自定义规则来“绕过Sass对@media的专有处理”的可能（但仍然不满意）解决方法。所以你会写例如。

@_media (max-width: #{$x})

在编译sass之后，运行一个替换脚本，将@_media转换为@media。

另一个类似的想法是为无效的css本身使用css-valid占位符，然后在sass完成所需的字符串之后在第二次运行中替换它...

如何强制Sass解释器输出非css代码？

1 个答案: