LESS - data-uri绘制器混合

Question

我正在尝试实现自定义文本下划线的混入，比如CSS3 text-decoration properties的polyfill :线条、样式、颜色，这些都还不被浏览器支持。

我的想法是在画布中绘制正确的线条，然后将其转换为data-uri，并将其用作目标元素的背景。问题是当使用node.js编译LESS时，环境中没有画布。从技术上讲，我可以使用node-canvas来执行这项任务，但我不想为node建立任何依赖关系，只是为了减少编译。

有没有一种好的简单的替代方法来绘制微图像，并基于此形成数据uri，而不涉及外部库或依赖项？

解决: PNG数据生成器代码和一些演示here。它是.png mixin，它生成索引颜色的png，接受字节流(字符串)作为数据，其中00 -透明颜色，01 -传递颜色。

Answer 1

我不完全确定你到底想如何实现这个混入(你想对这个混入做些什么)，但也许下面的一些内容会有所帮助。

你可以使用back-ticks.

• Second:在LESS的javascript实现中使用javascript插值，也有一些解决方案可以用来在较少的时间内绘制微型图像...我最近偶然看到了这篇博文：http://micheljansen.org/blog/entry/1238

这里的想法是有一个简单的gif背景，只需改变颜色(使用一些嵌入的javascript将r转换为64位基数)。例如，要实现像css text-decoration-style:wavy;中使用的那样的wavy行效果，您可以使用以下较少的代码：

.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将它们放在文本的后面。如果你想把行放在文本的前面，就像在选项line-through中一样，你需要在你的CSS中使用:afetr伪类：

.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动画：

• How do you make an image blink?
• CSS3 animation: blinking overlay box

或者，您可以使用jQuery对元素进行闪烁。

您可以通过使用多个背景图像来实现的效果组合，并将一个放在顶部，一个放在底部。

这里我拼凑了一个快速的demo on jsfiddle。

编辑: Pure LESS mixin (无JS)：

我写了一个新的混合来计算base64颜色，所以它在所有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}";
}

这应该适用于所有较低版本的>= 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}";
}

Answer 2

data-uri函数现在是内置的：

http://lesscss.org/functions/#misc-functions-data-uri