创建转换混合的问题答案

【问题标题】：Issues creating transform mixin创建转换混合的问题
【发布时间】：2014-07-23 13:53:13
【问题描述】：

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

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

IE9 毫秒用于移动设备的 webkit 其余的转换 caniuse

但是我得到了这个输出：

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

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

【问题讨论】：

标签： css sass transform mixins

【解决方案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})';
}

【讨论】：

嗯，它确实有效，但我认为它不是一个好的解决方案。我想知道如何以我创建的样式创建混合，特别是为什么在输出中忽略括号 ()。
我不知道为什么括号 () 被忽略了..也许它作为一个函数来解释它？我添加了一个经过编辑的解决方案来保留这两个参数。它不是很漂亮，但它可以工作
确实您的第一个输入是正确的。它工作正常。谢谢你的两个答案！