我正在尝试实现 mixin 自定义文本下划线，例如CSS3 文本装饰属性的polyfill ：线条、样式、颜色，浏览器尚不支持。
我的想法是在画布中绘制正确的线条，然后将其转换为 data-uri 并将其用作目标元素的背景。问题是使用 node.js 编译 LESS 时，环境中没有画布。从技术上讲，我可以使用node-canvas来执行此任务，但我不想为 node 建立任何依赖关系只是为了编译 LESS。
有没有一种好的和简单的替代方法来以某种方式绘制微图像并基于此形成 data-uri，而不使用外部库或依赖项？
已解决：PNG 数据生成器代码和此处的一些演示。它.png是生成索引颜色 png 的 mixin，接受字节流（字符串）作为数据，其中 00 - 透明颜色，01 - 传递颜色。
我不完全确定你想如何实现 mixin（你想用 mixin 做什么），但也许其中一些会有所帮助。
首先：您可以在LESS的 javascript 实现中使用 javascript 插值，使用反引号。
第二： LESS中也有一些画微图的解决方案……我最近才看到这篇博文：http: //micheljansen.org/blog/entry/1238
这里的想法是有一个简单的 gif 背景，只需更改颜色（使用一些嵌入的 javascript 将 rgb 转换为 64 位基础）。例如，要wavy像在 css 中使用的那样做线条效果，text-decoration-style:wavy;您可以使用以下 LESS 代码：
.wavyrgb(@r,@g,@b) {
@key: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
@b64: `function(r,g,b){var key=@{key};return key.charAt(((0&3)<<4)|(r>>4))+key.charAt(((r&15)<<2)|(g>>6))+key.charAt(g&63)+key.charAt(b>>2)+key.charAt(((b&3)<<4)|(255>>4))}(@{r},@{g},@{b})`;
background-image: ~"url(data:image/gif;base64,R0lGODlhBgADAIAAA@{b64}///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7)";
}
然后将背景图片放在底部，例如：
.underwave {
text-decoration:none;
.wavyrgb(255,0,0); //red line
background-repeat:repeat-x;
background-position:bottom;
}
输出CSS：
.underwave {
text-decoration: none;
background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
background-repeat: repeat-x;
background-position: bottom;
}
现在剩下的只是一些 css 提示来完成该方法：
通过这种方式定位background-image到顶部或底部，您可以获得上划线或下划线效果。使用 .放置在文本的后面text-decoration-line。如果你想把这一行放在文本的前面，就像在 option 中一样line-through，你需要:afetr在你的 CSS 中使用伪类：
.throughwave {
text-decoration: none;
position:relative;
}
.throughwave:after {
background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
background-repeat: repeat-x;
background-position: center;
}
也有关于添加闪烁效果的讨论……例如这里的 CSS 动画：
或者您可以使用 jQuery 来使元素闪烁。
例如，您可以通过使用多个背景图像并将一张放在顶部、一张放在底部来实现效果的组合。
在这里，我整理了一个关于 jsfiddle的快速演示。
我编写了一个新的 mixin 来仅使用 LESS 计算base64颜色，因此它适用于所有 LESS 实现。
这是一个 LESS 1.4.0解决方案：
.b64(@r,@g,@b) {
@test: "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O" "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z" "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" 0 1 2 3 4 5 6 7 8 9 "+" "/" "=";
@bit1: extract(@test, (floor(@r/16) + 1)); @bit2: extract(@test, (mod(@r,16)*4 + floor(@g/64) + 1)); @bit3: extract(@test, (mod(@g,64) + 1)); @bit4: extract(@test, (floor(@b/4) + 1)); @bit5: extract(@test, (mod(@b,4)*16 + 16));
b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}";
}
这应该适用于所有 LESS 版本 >= 1.1.6：
.b64(@r,@g,@b) {
@1:"A"; @2:"B"; @3:"C"; @4:"D"; @5:"E"; @6:"F"; @7:"G"; @8:"H"; @9:"I"; @10:"J"; @11:"K"; @12:"L"; @13:"M"; @14:"N"; @15:"O"; @16:"P"; @17:"Q"; @18:"R"; @19:"S"; @20:"T"; @21:"U"; @22:"V"; @23:"W"; @24:"X"; @25:"Y"; @26:"Z"; @27:"a"; @28:"b"; @29:"c"; @30:"d"; @31:"e"; @32:"f"; @33:"g"; @34:"h"; @35:"i"; @36:"j"; @37:"k"; @38:"l"; @39:"m"; @40:"n"; @41:"o"; @42:"p"; @43:"q"; @44:"r"; @45:"s"; @46:"t"; @47:"u"; @48:"v"; @49:"w"; @50:"x"; @51:"y"; @52:"z"; @53:0; @54:1; @55:2; @56:3; @57:4; @58:5; @59:6; @60:7; @61:8; @62:9; @63:"+"; @64:"/"; @65:"=";
@modR16: @r - floor(@r/16)*16; @modG64: @g - floor(@g/64)*64; @modB4: @b - floor(@b/4)*4;
@pos1: (floor(@r/16) + 1); @pos2: (@modR16*4 + floor(@g/64) + 1); @pos3: (@modG64 + 1); @pos4: (floor(@b/4) + 1); @pos5: (@modB4*16 + 16);
@bit1: @@pos1; @bit2: @@pos2; @bit3: @@pos3; @bit4: @@pos4; @bit5: @@pos5;
b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}";
}
data-uri 函数现在是内置的：