创建转换混合的问题

Question

我正在尝试为CSS转换规则创建混合。我尝试了以下方法：

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

IE9的

ms webkit for mobile devices 改造其余的 caniuse

但我得到了这个输出：

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

这个结构似乎没有考虑括号()。你知道怎么解决这个问题吗？

Answer 1

你可以做这样的事情

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

并使用（）

发送参数

@include transform(rotate(45deg))

这将产生

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

修改

保持两个参数的解决方案

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

或

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