我在SASS中有以下@mixin:
@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {
-webkit-transform:
perspective( $perspective )
rotate#{ $axis }( $degrees )
translate#{ $axis2 }( $px );
-moz-transform:
perspective( $perspective )
rotate#{ $axis }( $degrees )
translate#{ $axis2 }( $px );
-o-transform:
perspective( $perspective )
rotate#{ $axis }( $degrees )
translate#{ $axis2 }( $px );
-ms-transform:
perspective( $perspective )
rotate#{ $axis }( $degrees )
translate#{ $axis2 }( $px );
transform:
perspective( $perspective )
rotate#{ $axis }( $degrees )
translate#{ $axis2 }( $px );
}
除了rotate#{$axis}和translate#{$axis}后面的括号之外,所有内容都能成功编译。下面是编译后的CSS代码:
-webkit-transform: perspective(600px) rotateX45deg translateY75px;
-moz-transform: perspective(600px) rotateX45deg translateY75px;
-o-transform: perspective(600px) rotateX45deg translateY75px;
-ms-transform: perspective(600px) rotateX45deg translateY75px;
transform: perspective(600px) rotateX45deg translateY75px;
我做错了什么?还是这种方法完全错误?
提前感谢您!
编辑:没关系!找到了解决办法……可能有点“hacky”,但至少有效。如果有人遇到同样的问题,我在这里发布它。
下面是改进后的工作混合:
@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {
-webkit-transform:
perspective( $perspective + px )
rotate#{$axis +"(" $degrees +deg +")" }
translate#{ $axis2 +"(" + $px +px +")" };
-moz-transform:
perspective( $perspective + px )
rotate#{$axis +"(" $degrees +deg +")" }
translate#{ $axis2 +"(" + $px +px +")" };
-o-transform:
perspective( $perspective + px )
rotate#{$axis +"(" $degrees +deg +")" }
translate#{ $axis2 +"(" + $px +px +")" };
-ms-transform:
perspective( $perspective + px )
rotate#{$axis +"(" $degrees +deg +")" }
translate#{ $axis2 +"(" + $px +px +")" };
transform:
perspective( $perspective + px )
rotate#{$axis +"(" $degrees +deg +")" }
translate#{ $axis2 +"(" + $px +px +")" };
}