Question

我正在尝试实现mixin自定义文本的下划线，例如CSS3 text-decoration properties的polyfill：line，style，color，浏览器还不支持。

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

是否有一种简单的替代方法可以在某种程度上以某种方式绘制微图像并根据此形成数据uri，而不是使用外部库或依赖项？

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

Answer 1

我不确定你究竟想要实现mixin（你想用mixin做什么），但也许其中一些可以帮助。

首先：您可以在LESS的javascript实现中使用javascript插值，使用反向标记。
第二：还有一些解决方案可用于在LESS中绘制微观图像...我刚刚看到这篇博文：http://micheljansen.org/blog/entry/1238

这里的想法是拥有一个简单的gif背景，只需更改颜色（使用一些嵌入式javascript将r g b转换为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中一样，则需要在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;
}

还有关于添加闪烁效果的SO的讨论......例如CSS动画：

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

使用多个背景图像可以实现的效果组合，例如，一个位于顶部，一个位于底部。

我在这里快速组合了demo on jsfiddle。

编辑：Pure LESS mixin（没有JS）：

我写了一个新的mixin来计算 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版本＆gt; = 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

少数 - 数据uri画家mixin

2 个答案:

编辑：Pure LESS mixin（没有JS）：