I'm not entirely sure about the exact implementation you're looking for with the mixin, but I can offer some guidance.
First: You can utilize JavaScript interpolations in JavaScript versions of LESS, using back-ticks.
Second: There are also solutions available for creating micro images in LESS. I recently stumbled upon this blog post:
The concept here involves having a simple GIF background and altering the color by converting RGB values to a 64-bit base using embedded JavaScript. For example, to achieve a wavy line effect similar to CSS's 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)";
}
You can then position the background image at the bottom, for instance:
.underwave {
text-decoration:none;
.wavyrgb(255,0,0); //red line
background-repeat:repeat-x;
background-position:bottom;
}
The resulting CSS:
.underwave {
text-decoration: none;
background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
background-repeat: repeat-x;
background-position: bottom;
}
Additionally, here are some CSS tips to finalize your approach:
By positioning the background-image at the top or bottom, you can create overline or underline effects. These elements will stay behind the text using text-decoration-line. If you prefer to place the line in front of the text, as seen in the line-through option, you'll need to use the :after pseudo-class 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 suggestions on adding a blinking effect, either through CSS animations like those discussed on Stack Overflow:
- How do you make an image blink?
- CSS3 animation: blinking overlay box
Alternatively, you could implement the blinking effect on an element using jQuery.
You can combine multiple background images to achieve various effects, such as placing one on top and another on the bottom.
For a quick demonstration, I put together a demo on jsfiddle.
Edit: Pure LESS mixin (no JS):
I created a new mixin to calculate the base64 color solely with LESS, making it compatible with all LESS implementations.
This solution is tailored for 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}";
}
This should work in all versions of 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}";
}