我想用 scss 重新创建以下内容:
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);
我试过了,但是没用。是否有可能结合 map 来沿着这些路线得到一些东西?
最佳答案
使用
@include transform(rotate(-20deg) scale(1) skew(-20deg) translate(-40px));
关于css - 是否可以在 sass 中组合转换 mixin?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37339610/