meteor pass blaze property to css（.less）

我有一個帶有顏色屬性的文檔，我想用它作爲div的背景。我現在做以下和它的作品：meteor pass blaze property to css（.less）

<li class="task" style="background-color: {{statusColor}}">

顏色保存爲一個十六進制值，我想補充的透明度了。我看，這是有可能用更少的資源做：

.task{ 
    @result: fade(red, 50%); 
    background-color: @result; 
}

是否有使用方式{{statusColor}}作爲淡入淡出（）函數的參數？

來源

2015-12-21 Chris

你是對的，可以通過fade()減少透明度。這種方法的問題在於流星建立過程的一部分，因此不可能知道要使用哪個文檔的statusColor。換句話說，您的.less文件在編譯時編譯爲.css，而不是運行時。

因此，您需要以rgb格式存儲您的顏色，以便您可以使用background-color: rgba(r,g,b,a);或在前端進行轉換。

下面是一些代碼轉換從十六進制RGBA：

Template.task.helpers({ 
    statusColorRGBA: function(hex) { 
     return 'rgba(' + parseInt(hex.slice(-6,-4),16) 
     + ',' + parseInt(hex.slice(-4,-2),16) 
     + ',' + parseInt(hex.slice(-2),16) 
     +',0.5)'; 
    } 
});

用法：

<li class="task" style="background-color: {{statusColorRGBA statusColor}}">

僅供參考，有https://stackoverflow.com/a/19663620/211727

你可以在這樣的幫手使用目前沒有辦法用十六進制符號在alpha通道中指定：https://stackoverflow.com/a/31029864/211727

來源

2015-12-21 15:58:20 ejb

meteor pass blaze property to css（.less）

回答

相關問題