是否有可能在sass中有一个混合变换混合？

我想重新与SCSS如下：是否有可能在sass中有一个混合变换混合？

transform: rotate(-20deg) scale(1) skew(-20deg) translate(-40px);

但我想避免输入多个浏览器的前缀，所以我必须：

@mixin transform($transforms) { 
    -moz-transform: $transforms; 
    -o-transform: $transforms; 
    -ms-transform: $transforms; 
-webkit-transform: $transforms; 
     transform: $transforms;

}

与这样的个人变换工作正常作为：

@mixin scale($scale) { 
@include transform(scale($scale));

}

我曾尝试包括功能

@mixin skewTitle($rot, $sca, $ske, $tran){ 
    @include transform(scale($sca)); 
    @include transform(skew(#{$ske}deg)); 
    @include transform(translate($tran)); 
    @include transform(rot(#{$rot}deg)); 
}

但它只是将它们组合连续导致一个覆盖等。

-moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -moz-transform: rotate(-30deg); 
    -o-transform: rotate(-30deg); 
    -ms-transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
    transform: rotate(-30deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    -ms-transform: skew(-20deg); 
    -webkit-transform: skew(-20deg); 
    transform: skew(-20deg); 
    -moz-transform: translate(-40px); 
    -o-transform: translate(-40px); 
    -ms-transform: translate(-40px); 
    -webkit-transform: translate(-40px); 
    transform: translate(-40px);

我尝试了所有的东西等组合：

@include transform: rotate(#{$val}deg) scale($val) skew(#{$val}deg) translate($val);

我试过，但没有奏效。是否有可能结合地图来获得这些方面的东西？

来源

2016-05-20 HGB

为什么不写它像'@包括变换（旋转（＃{$腐}度）规模（＃{$ SCA}）歪斜（＃{$ SKE}度）翻译（＃ {$ TRAN} PX））;'？它适用于我@ sassmeister.com – Harry

你能举一个例子吗？它不适合我。 '@mixin skewTitle（$ rot，$ sca，$ ske，$ tran）{0} {0} {0} {0} #include变换（旋转（＃{$ rot} deg）缩放（＃{$ ske} deg）翻译（＃{$ TRAN} PX））; }' – HGB

请检查[this]（http://codepen.io/anon/pen/yOdKzO）。点击“查看编译”按钮查看编译的CSS。 – Harry

-1

使用

@include transform(rotate(-20deg) scale(1) skew(-20deg) translate(-40px));

来源

2016-10-20 05:27:25

在解决当前问题时添加一些解释和回答，以帮助解决当前问题中的OP问题 –

尽管此代码片段可能解决问题，[包括解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-基于代码的答案）确实有助于提高帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 – andreas

是否有可能在sass中有一个混合变换混合？

回答

相关问题