Search code examples
csssasstransformmixins

Issues creating transform mixin

I'm trying yo create a mixing for the CSS transform rule. I tried the following:

@mixin transform($action, $value) {
    -webkit-transform: $action($value);
    -ms-transform: $action($value);
    transform: $action($value);
}

ms for IE9 webkit for mobile devices transform for the rest caniuse

But I get this output:

-webkit-transform: rotate 45deg;
-ms-transform: rotate 45deg;
transform: rotate 45deg;

It seems the brackets () are not taken into account with this structure. Do you know how to solve this?

Solution

  • You can do something like this

    @mixin transform($action) {
  -webkit-transform: $action;
  -ms-transform: $action;
  transform: $action;
}

    And send in the parameter with ()

    @include transform(rotate(45deg))

    This will produce

    -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

    EDIT

    Solutions for keeping the two parameters

    @mixin transform($action, $value) {
  -webkit-transform: $action + '(' + $value + ')';
  -ms-transform: $action + '(' +$value + ')';
  transform: $action + '(' + $value + ')';
}

    or

    @mixin transform($action, $value) {
  -webkit-transform: $action + '(#{$value})';
  -ms-transform: $action + '(#{$value})';
  transform: $action + '(#{$value})';
}