我正在尝试为CSS转换制作SCSS mixin,我想传递参数.但是,使用变量时,我的位置值的括号将被删除.
编译后的外观如何：
transform: translateX(-100px);
我的混音：
@mixin fadeup ($direction,$value) {
transform: translate#{$direction} ($value);
}
什么时候叫：
@include fadeup(X,100px);
遗憾地输出：
transform: translateX 100px;
所以围绕100px值的括号丢失了,所以它不起作用.
我有什么想法可以保留括号吗？
解决方法
在我看来你可以用unquote来帮助维护()…这样的事情应该有效：
@mixin fadeup ($direction,$value) {
transform: translate#{$direction}unquote("("#{$value}")");
}
.foo {
@include fadeup(X,100px);
}
.bar {
@include fadeup(Y,100px);
}
编译为：
.foo {
transform: translateX(100px);
}
.bar {
transform: translateY(100px);
}
