Question

我想用sass创建一个safari浏览器规则。根据{{3}}回答，我需要

@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 在第二个和之后的空格。 这是this

如果我能创建一个@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没有正文

所以我想知道：

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

P.S。我正在使用Sass 3.4.21 (Selective Steve)

致以最诚挚的问候，

Answer 1

您可以使用#{}

在SASS中强制格式化

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

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

1 个答案: