如何强制 Sass 解释器输出非 CSS 代码？答案

【问题标题】：How to force the Sass interpreter to output non-css code?如何强制 Sass 解释器输出非 CSS 代码？
【发布时间】：2016-02-02 18:38:03
【问题描述】：

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

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

当包含指令的变量在属性值中被引用时，工作正常，例如这编译成功：

$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;
  }
}

【问题讨论】：

我进行了一些搜索，但没有找到任何解决方案来处理这个问题。你不能反转这个过程（首先运行你的其他解析器）吗？
@ByScripts 遗憾的是，这是不可能的，因为指令（>）稍后会在运行时被 javascript 动态替换。

标签： css sass

【解决方案1】：

我在 sass GitHub repo 上做了一个 cross post 和 was told 插值发生在媒体查询被解析之前，这就是它在这里不起作用的原因。

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

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

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

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

【讨论】：