sass mixins和css自定義屬性

我試圖爲css自定義屬性構建一個sass mixin，使工作變得更容易一些。

我嘗試看起來是這樣的：

@mixin mixin($value) { 
    background: unquote('$')#{$value}; 
    background: var(--#{$value}, unquote('$')#{$value}); 
}

輸出看起來是這樣的：

.example { 
    background: $value; 
    background: var(--colour, $value); 
}

但青菜不我的$值轉換成實際的事情。 $ value部分最終在我的最終css文件中，並且這不起作用。

我試圖找到一個在線解決方案，但我要麼愚蠢的發現它或沒有一個。這裏的任何人都有一個想法，我在做什麼錯了？

來源

2017-08-01 Andreas Grafen

您期望的CSS輸出是什麼？ – blonfu

類似'background：$ abcdef;'但是我得到的是'background：$ value;'因爲sass似乎沒有將變量轉換爲給定的值。 –

對不起，但我不明白，如果您在'$ value'變量中傳遞了'＃abcdef'，就會得到'＃abcdef'，並且您的代碼爲什麼使用插值？ – blonfu

我試試你的代碼這個例子：

@mixin mixin($value) { 
    background: unquote('$')#{$value}; 
    background: var(--#{$value}, unquote('$')#{$value}); 
} 

.example { 
    @include mixin(colour) 
}

和它的作品。輸出結果爲：

.example { 
    background: $colour; 
    background: var(--colour, $colour); 
}

是你想要的嗎？對不起，但我沒有添加評論的授權，所以我創建了這個答案。

編輯：您可以創建一個不同的混入這樣的：

@mixin mixin($value, $color) { 
     background: $color; 
     background: var(--#{$value}, $color); 
    }

此幫助你解決問題了嗎？

來源

2017-08-01 13:21:09

問題在於它不會用我css輸出中的實際顏色替換變量。我只是'background：$ color;'而不是'background：#abcdef;' –

抱歉我的誤解。幾天前，我遇到了同樣的問題，但我發現Sass不允許動態創建或訪問變量。 –

這意味着，如果我說得對，那就沒有辦法像這樣建立一個混合？呃..那麼好吧。不管怎麼說，多謝拉！（： –

sass mixins和css自定義屬性

回答

相關問題