arguments need to have comma separators in Transformation functions
Closed this issue · 3 comments
I like how clean the mixins are using the @arguments variable, but it breaks when the arguments need to comma separated...
#test {
.skew(30deg, 20deg);
}
Becomes =>
#test {
-webkit-transform: skew(15deg 15deg);
-moz-transform: skew(15deg 15deg);
-ms-transform: skew(15deg 15deg);
-o-transform: skew(15deg 15deg);
transform: skew(15deg 15deg);
}
Which sucks b/c it should Become =>
#test {
-webkit-transform: skew(15deg, 15deg);
-moz-transform: skew(15deg, 15deg);
-ms-transform: skew(15deg, 15deg);
-o-transform: skew(15deg, 15deg);
transform: skew(15deg, 15deg);
}
Damn commas are missing! I'm using Less.app to watch and compile, but I'm assuming its not a less.app problem, but a general parsing thing, as the documentation @http://lesscss.org/ for the arguments variable illustrate this as default behavior.
The easy solution would be to change your mixins to have explicity arguments ie:
.skew(@x:0deg, @y:0deg) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y);
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
The only other way around it I see is to hack a @argumentsComma variable or something into Less...
Hi d4tocchini,
You can achieve this by passing in an escaped string:
#test { .skew(~"30deg, 20deg"); }
Will render:
#test { -webkit-transform: skew(30deg, 20deg); -moz-transform: skew(30deg, 20deg); -ms-transform: skew(30deg, 20deg); -o-transform: skew(30deg, 20deg); transform: skew(30deg, 20deg); }
I chose to use @arguments rather than explicit @parama:A, @paramB:B etc. because it allows the mixins to be far more flexible.
Hope that helps : ),
Matt
Hot damn! didn't realize you could escape the parameters, thanks!
I totally agree about the flexibility of using @parameters, but its weird having to escape parameters just for the transformation mixins... that'd be a killer snippet to add to the code comments