wagerfield / cssmixins Goto Github PK

I think it would be better if cssmixins support bower

How is this code to be licensed and attributed?

Hey,

Not sure if you're interested in supporting IE but sadly I don't have a choice. So I've written a modified mixin that includes filters and detects angles, converts to aRBG and basically does all of the heavy lifting for you. It sacrifices some of the beautiful simplicity of your mixin. But then doesn't IE support always?

Anyway here's the gist, let me know if you're interested in including it :)

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...

For example, view-source of http://desandro.github.com/3dtransforms/examples/card-02-slide-flip.html

      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;

Don't think there's a way to do this with any of the current mixins nicely.

you only need -webkit- -moz- and unprefixed.

ms and o use unprefixed already.

add support for animation-* like these:

.animation-duration(...) {
    -webkit-animation-duration: @arguments;
       -moz-animation-duration: @arguments;
         -o-animation-duration: @arguments;
            animation-duration: @arguments;
}
.animation-fill-mode(...) {
    -webkit-animation-fill-mode: @arguments;
       -moz-animation-fill-mode: @arguments;
         -o-animation-fill-mode: @arguments;
            animation-fill-mode: @arguments;
}