少数 - 数据uri画家mixin

Question

我正在尝试实现mixin自定义文本的下划线,比如用于CSS3文本修饰属性的 polyfill :线条,样式,颜色,浏览器还不支持.

我的想法是在画布中执行绘画适当的线条,然后将其转换为data-uri并将其用作目标元素的背景.问题是当用node.js编译LESS时,环境中没有画布.从技术上讲,我可以使用node-canvas来执行此任务,但我不想为节点创建任何依赖项来编译LESS.

是否有一种良好而简单的替代方式以某种方式绘制微图像并基于此形成数据-ri,而不是外部库或依赖项？

解决:PNG数据生成代码及一些演示这里.它是.pngmixin,它生成索引颜色png,接受字节流(字符串)作为数据,其中00 - 透明颜色,01 - 传递颜色.

Answer 1

我不完全确定你究竟想要实现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.如果要将行放在文本前面,就像在选项中一样,则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;
}

关于添加闪烁效果的SO也有讨论...例如CSS动画在这里:

• 你如何使图像闪烁？
• CSS3动画:闪烁覆盖框

或者你可以使用jQuery做一个元素的闪烁.

使用多个背景图像可以实现效果的组合,一个位于顶部,一个位于底部.

在这里,我在jsfiddle上汇总了一个快速演示.

编辑:Pure LESS mixin(没有JS):

我写了一个新的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}";
}