wagerfield/cssmixins

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