templates - 如何在 Jade 中嵌入转义的 scss 代码

Question

我正在使用 Prepros 编译 *.jade 模板。

当前翡翠代码：

pre
  code.hljs
    .ui-button {
      @include button;
      &.xs {@include button-size(xs);}
      &.sm {@include button-size(sm);}
      &.md {@include button-size(md);}
      &.lg {@include button-size(lg);}
      &.xl {@include button-size(xl);}
      &.xxl {@include button-size(xxl);}
    }

预期结果：

<pre>
  <code class="hljs">
.ui-button {
  @include button;
  &amp;.xs {@include button-size(xs);}
  &amp;.sm {@include button-size(sm);}
  &amp;.md {@include button-size(md);}
  &amp;.lg {@include button-size(lg);}
  &amp;.xl {@include button-size(xl);}
  &amp;.xxl {@include button-size(xxl);}
}
  </code>
</pre>

Answer 1

回答：

在 CSS 代码的情况下不需要代码转义。

pre
  code.hljs
    | .ui-button {
    |   @include button;
    |   &.xs {@include button-size(xs);}
    |   &.sm {@include button-size(sm);}
    |   &.md {@include button-size(md);}
    |   &.lg {@include button-size(lg);}
    |   &.xl {@include button-size(xl);}
    |   &.xxl {@include button-size(xxl);}
    | }