Concatenate Classes with strings in LESS CSS - css

Question

I'm relatively new to LESS. It's impressive, and I'm really enjoying working with it thus far, but I'm curious to know: Can I use results produced by mixin functions and concatenate them with strings. I'm including an example with LESShat, which offers a number of Mixin Functions, including a function that generates keyframe animations. The issue being that the Keyframe function needs to be passed a string including properties, and I'm wanting to use other mixins from the LESShat library instead of css properties to generate such keyframe animations.
Original .less File:
#import "css/lesshat.less";
.keyframes(~'myskew, from {.skew(0)} to {.skew(90)}');
.myskewclass {
.animation(myskew 3s linear alternate)
}
Resulting .css File:
lesshat-selector{-lh-property:0}
#-webkit-keyframes myskew{from{.skew(0)}to{.skew(90)}}
#-moz-keyframes myskew{from{.skew(0)}to{.skew(90)}}
#-o-keyframes myskew{from{.skew(0)}to{.skew(90)}}
#keyframes myskew{from{.skew(0)}to{.skew(90)}}
.myskewclass{
-webkit-animation:myskew 3s linear alternate;
-moz-animation:myskew 3s linear alternate;
-o-animation:myskew 3s linear alternate;
animation:myskew 3s linear alternate
}
Obviously not quite what I was going for as the keyframe animations still contain the skew functions and not the values returned by the skew functions. I believe the problem may be that I'm trying to pass other mixins from LESShat inside of the string. So, is there some manner of concatenating strings and mixin functions in LESS? Keep in mind, I'm a total NEWB to LESS. I would simply rather not have to write my own cross-browser transforms. It'd me cool if it could all be automated using LESS. I'm obviously doing it wrong.
The following link describes the .keyframes and .skew functions from LESShat, but I see nothing regarding the mixing of the two mentioned. Maybe I somehow missed that part.
https://github.com/madebysource/lesshat/blob/master/README.md

Answer 1

As far as i understand you should not use the skew() mixin inside or together with keyframes mixin, according the docs you mention, you should use:
.keyframes(~'animationName, 0%{ transform: skewX(0); } 100%{ transform: skewX(90deg) }');
The above will output the following CSS code:
lesshat-selector {
-lh-property: 0; }
#-webkit-keyframes animationName{ 0%{ -webkit-transform: skewX(0); } 100%{ -webkit-transform: skewX(90deg) }}
#-moz-keyframes animationName{ 0%{ -moz-transform: skewX(0); } 100%{ -moz-transform: skewX(90deg) }}
#-o-keyframes animationName{ 0%{ -o-transform: skewX(0); } 100%{ -o-transform: skewX(90deg) }}
#keyframes animationName{ 0%{-webkit-transform: skewX(0);-moz-transform: skewX(0);-ms-transform: skewX(0);transform: skewX(0); } 100%{-webkit-transform: skewX(90deg);-moz-transform: skewX(90deg);-ms-transform: skewX(90deg);transform: skewX(90deg);};
}
You should also notice that using the autoprefixer instead of mixin libraries such as Lesshat will be better practice in most cases.
You should run:
npm install less
npm install less-plugin-autoprefix
less input.less --autoprefix
With the autoprefix plugin:
#keyframes myskew {
0% {
transform: skewX(0);
}
100% {
transform: skewX(90deg);
}
}
Compiles into:
#-webkit-keyframes myskew {
0% {
-webkit-transform: skewX(0);
transform: skewX(0);
}
100% {
-webkit-transform: skewX(90deg);
transform: skewX(90deg);
}
}
#keyframes myskew {
0% {
-webkit-transform: skewX(0);
transform: skewX(0);
}
100% {
-webkit-transform: skewX(90deg);
transform: skewX(90deg);
}
}