sass интерполяция в селекторе не работает

Question

Я хочу создать правило для браузера сафари только с sass. По this ответ мне нужен

@media экран и (мин-цвето-индекс: 0) и (-webkit-мин-устройства пиксел соотношение: 0)

Обратите внимание, что нет никакого пространства после 2-го и, в противном случае он запускает хром. Так где-то в 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 пространство после 2-го и. Вот demo

Другая вещь, которую я хотел бы знать, если я могу создать @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. Как сказать дерзость не форматирования кода вместо меня?
2. Как я могу создать первый селектор уровня в качестве 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)'}