我在 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;
我做错了什么?或者这是一种完全错误的方法吗?
提前致谢!
EIDT:没关系!找到了一个解决方案......它可能有点“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 +")" };
}
最佳答案
稍微修改一下,我发现这个 mixin 更适合我的要求:
@mixin keyframeBuilder($animationName, $f, $startParams, $stopParams) {
@-webkit-keyframes $animationName {
from { -webkit-transform: $f+'('#{$startParams}')' }
to { -webkit-transform: $f+'('#{$stopParams}')' }
}
@-moz-keyframes $animationName {
from { -moz-transform: $f+'('#{$startParams}')' }
to { -moz-transform: $f+'('#{$stopParams}')' }
}
... (other vendor prefixes)
}
基本上当我打电话的时候
@include keyframeBuilder(spin, rotate, 0deg, 360deg);
它产生:
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg); } }
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg); }
to {
-moz-transform: rotate(360deg); } }
@-o-keyframes spin {
from {
-o-transform: rotate(0deg); }
to {
-o-transform: rotate(360deg); } }
@keyframes spin {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
我希望这也会对某人有所帮助! :)
关于css - 为什么在 SASS 中 #{$var} 之后没有编译括号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18272579/