Sass mixin顏色名稱編譯問題

我剛剛寫了一個mixin應該顯示視頻顯示的@ 2x圖標版本。Sass mixin顏色名稱編譯問題

首先，這裏是一個圖標名稱的例子：

 images/icon/close-black.png 
     images/icon/[email protected]

這裏是混入：

 @mixin background-image-retina($type, $file, $color, $ext) { 
      background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext); 
      @media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi), 
       only screen and (min-resolution: 2dppx){ 
       & { 
        background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '@2x.' + $type); 
       } 
      }                   
     }

所以我打電話給我的mixin：

@include background-image-retina(icon, close, black, png);

而這裏結果，這裏是問題：

background-image: url(src/assets/images/icon/close-#000.png);

我的問題：

有誰知道如何在沒有實際十六進制顏色編譯它指定圖標的顏色？

感謝您的幫助！

[編輯：發現的解決方案]

爲了避免色樣的名稱在編譯你的mixin，只需添加它周圍的引號。

 black -> #000 
     "black" -> black

來源

2017-04-21 Alexis Wollseifen

好的，我想我剛剛找到了解決方案。這麼簡單... 爲了避免在mixin中編寫類似顏色的名稱，只需在它周圍添加引號**。我將編輯我的問題給需要答案的人。 –

我想你可能有一個老版本的SASS。字符串周圍的顏色很好，但沒有必要。此外，如果您插值，即使在舊版本中，我認爲它會解決您的問題;加上它更短，更容易遵循。我給你做了兩個sassmeister;在較新版本的SASS中比較內插和非內插變量。但這裏基本上我在說什麼：

@mixin background-image-retina($type, $file, $color, $ext) { 
    background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}'); 

    @media only screen and (whatevs) { 
     & { 
      background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}@2x.#{$type}'); 
     } 
    }                   
} 

.hey { @include background-image-retina(icon, close, black, png); }

來源

2017-07-29 20:19:11 Ari

Sass mixin顏色名稱編譯問題

回答

相關問題