sass插入在選擇器不起作用

我想創建一個safari瀏覽器的規則只與sass。根據this答案我需要sass插入在選擇器不起作用

@media屏幕和（最小 - 顏色索引：0）和（-webkit分鐘設備像素比：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

這將產生一個錯誤的混入沒有身體

所以我想知道：

我怎麼知道青菜不格式化，而不是代碼我？
如何創建第一級選擇作爲一個混合

附：我使用Sass 3.4.21 (Selective Steve)

最好的問候，

來源

2016-07-06 deathangel908

-1

您可以強制在SASS格式與#{}

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

來源

2016-07-06 23:07:13 AJFarkas

根據我的需求可以ü請編輯您的答案？我需要爲選擇器創建文字，而不是爲了價值。 '背景'只是一個突出的例子，可以清楚地看到在鉻和Safari瀏覽器之間的區別。正如我寫的，我使用'＃{$ safari-only}'它不起作用！如果我用它的值替換一個變量它不會改變一個東西:( – deathangel908

正如我在這個問題中寫的那樣，它不起作用！它符合'...）和（-web ...'請參閱' **和**之後的空格？它打破了這個瀏覽器特定規則的所有功能。我認爲你只是沒有閱讀我的問題:) – deathangel908

你可以檢查我添加的演示嗎？ http://www.sassmeister.com/gist/3ddf25510ea9b0e5d9e55f6ac9929ea7 – deathangel908

sass插入在選擇器不起作用

回答

相關問題