选择器中的 sass 插值不起作用

Question

我想只用 sass 为 safari 浏览器创建一个规则。根据this 回答我需要

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)

注意第二个和后面没有空格，否则会触发chrome。 所以在my-file.sass 的某个地方我做了以下事情：

$safari-only: '(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'

@media screen and #{$safari-only}
    body
        background-image: linear-gradient(green 0%, red 100%) !important

但是这东西编译成

@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
  body {
    background-image: linear-gradient(green 0%, red 100%) !important;
  }
}

注意，在第二个和之后IS有一个空格。 这是demo

另一件事我想知道我是否可以创建一个@safari-only mixin。例如：

@mixing safari-only
  $safari-only: '(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'
  @media screen and #{$safari-only}

@include safari-only
  body
    background-image: linear-gradient(green 0%, red 100%) !important

这会产生一个 mixin 没有主体的错误

所以我想知道：

1. 我如何告诉 sass 不格式化代码而不是我？
2. 如何将第一级选择器创建为 mixin

附言我正在使用Sass 3.4.21 (Selective Steve)

最好的问候，

Answer 1

您可以在 SASS 中使用 #{} 强制格式化

$safari-only: #{'(min-color-index:0) and(-webkit-min-device-pixel-ratio:0)'}