LESS - 数据 - uri画家mixin [英] LESS — data-uri painter mixin

问题描述

我想实现mixin自定义文本下划线，例如polyfill CSS3文本装饰属性：线，样式，颜色，这些都不被浏览器支持。

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

有一个很好的和简单的替代方法绘制微图像不知何故，形成数据uri基于此，不参与外部库或依赖项？

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

解决方案

我不完全确定你是如何实现mixin（你想要做的所有mixin），但也许一些 http://lesscss.org/#-javascript-evaluation =nofollow noreferrer> LESS ，使用回圈。

第二：还有一些解决方案可用于绘制微​​图像在LESS ...我刚刚遇到这个博客文章： http://micheljansen.org/blog/entry/1238

这里的想法是有一个简单的gif背景，只是改变颜色（使用一些嵌入的javascript将rgb转换为64位的基础）。例如，像在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）<< ）+ 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; 
} 
  

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

• 如何使图像闪烁？


• CSS3动画：闪烁重叠方块

可以使用jQuery做一个元素的闪烁。

使用多个背景图片可以实现的效果的组合，并且一个在顶部，一个在底部。 / p>

在这里，我简单介绍了 jsfiddle上的演示

---

编辑：Pure LESS mixin（no JS）：

< blockquote>

我写了一个新的mixin来计算只有LESS的 base64 颜色，所以
在所有的LESS实现中都有效。

这是一个LESS 1.4.0 解决方案：

  .b64（@ r，@ g，@ b）{
 @test：ABCDEFGH IJKLMNOPQRS Zabcdefghijklmn qrstuvwxyz0 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}; 
} 
  

I’m trying to implement mixin customizing underline of text, like polyfill for CSS3 text-decoration properties: line, style, color, which are not supported yet by browsers.

My idea is to perform painting proper line in canvas, then convert it to data-uri and use it as background for target element. Problem is when compiling LESS with node.js, there is no canvas in environment. Technically I could use node-canvas to perform this task, but I don’t want to make any dependencies for node just to compile LESS.

Is there a good and simple alternative way to paint micro-image somehow and form data-uri based on this, not engaging external libraries or dependencies?

SOLVED: PNG data-generator code and some demos here. It’s .png mixin that generates indexed-color png, accepts stream of bytes (string) as data, where 00 - transparent color, 01 - passed color.

解决方案

I am not completely sure how exactly you want to implement the mixin (what all you want to do with the mixin), but maybe some of this can help.

• First: You can use javascript interpolations in javascript implementations of LESS, using back-ticks.

• Second: There are also some solutions available for drawing micro images in LESS ... I just recently came across this blog post: http://micheljansen.org/blog/entry/1238

And the idea here is to have a simple gif background and just change the color (using some embeded javascript to transform r g b to a 64 bit base). For example to do the wavy line efect like the one used in css text-decoration-style:wavy; you could use the following LESS code:

.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)";
}

And then place the background image on the bottom for example:

.underwave {
    text-decoration:none;
    .wavyrgb(255,0,0); //red line
    background-repeat:repeat-x;
    background-position:bottom;
}

The output CSS:

.underwave {
  text-decoration: none;
  background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
  background-repeat: repeat-x;
  background-position: bottom;
}

---

The rest now are just some css hints to finalize the approach:

This way with positioning the background-image to top or bottom, you get an overline or underline effect. Which are placed in the back of text using text-decoration-line. If you want to place the line in front of the text, like in the option line-through, you need to use the :afetr pseudoclass in your 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;
}

There have been also discussions on SO about adding a blinking effect ... for example with CSS animations here:

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

or you could do the blinking of an element using jQuery.

The combination of effects you can achieve with using multiple background images and position one on top, one on bottom for example.

Here I threw together a quick demo on jsfiddle.

---

Edit: Pure LESS mixin (no JS):

I wrote a new mixin to calculate the base64 color with LESS only, so it works in all LESS implementations.

This is a LESS 1.4.0 solution:

.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}";
}

This should work in all LESS versions >= 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}";
}

这篇关于LESS - 数据 - uri画家mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！