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

Question

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

@media屏幕和（最小颜色索引：0）和（-webkit-min-device-pixel-ratio：0）

请注意，第 2 个之后没有空格，否则它会触发 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;
  }
}

请注意，在第二个和之后有一个空格。这是演示

我

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

@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

这会产生一个错误，即混合体没有主体

所以我想知道：

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

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

此致敬意

Answer 1

您可以使用

#{}在 SASS 中强制格式化

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