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）

回答

相关问题