LESS mixin 用于颜色转换：HEX 到 BASE64答案

【问题标题】：LESS mixin for color conversion: HEX to BASE64LESS mixin 用于颜色转换：HEX 到 BASE64
【发布时间】：2012-12-13 03:28:42
【问题描述】：

是否有 LESS mixin 可以进行以下转换？

#371541

到：

   data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5MTAzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzM3MTU0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyOTEwMzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+

【问题讨论】：

标签： hex base64 type-conversion less mixins

【解决方案1】：

简短回答：“不”（我不知道）

更长的答案是：

首先，为什么？直接颜色比将这种颜色变成由数据 uri 提供的图像要好得多。它的代码更少，我怀疑处理速度更快。

其次，如果你必须拥有它，那么你将......

任一(1)都需要自己做颜色转换mixin。您可以为您可能希望通过模式匹配转换的每种颜色手动执行此操作。比如：

.convert64(#371541) {
   data:image/svg+xml;base64,...[your data string for 3711541]
}
.convert64(#371542) {
   data:image/svg+xml;base64,...[your data string for 3711542]
}

您需要为可能要转换的每个十六进制颜色设置匹配项，并有一个预配置的数据字符串要输出。 这当然是没有意义的，除非你只是在谈论少数数字。

或者(2)，some type of javascript solution to encode，LESS can process。

【讨论】：

我想这样做是因为我正在尝试创建一个跨浏览器的线性渐变 LESS 混合。对于 IE colorzilla.com/gradient-editor
@ndrizza：如果是这样，那为什么不使用filter 就像您链接到的那个网站一样（它不使用 IE 6-9 的数据 uri，但 IE 的 filter 属性)。
你是对的。什么时候使用'image/svg+xml'？我为什么要生成这个？
@ndrizza：它是在您尝试支持 IE9 的 svg 背景时生成的，它允许 IE9 具有“多个停止”（filter 命令显然不支持它；它只允许开始和停止颜色，中间停止点没有颜色变化，如现代 CSS3 渐变）。因此，仅在您可能尝试增强 IE9 体验以优于 IE
好的，谢谢，是的，我需要支持从 IE 7 开始向上 :(。我会尝试 js hack。我会尽快发布解决方案。