不完全确定如何问这个,所以我将用代码演示:
我有一个mixin,我希望我可以重构:
@mixin center-align($dir, $position: relative) {
position: $position;
@if $dir == Y {
top: 50%;
transform: translate + inspect($dir) + (-50%);
} @else if $dir == X {
left: 50%;
transform: translateX(-50%);
} @else {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
我不想做@if循环,而是想做这样的事情:
transform: translate + $dir + (-50%);
或
transform: translate+$dir(-50%);
或
transform: translate + inspect($dir) + (-50%);
但是每个都输出了这个变体:
transform: translateY-50%;
没有parens。
答案 0 :(得分:3)
您想在此处使用字符串插值:
.foo {
$foo: 'X';
transform: #{"translate#{$foo}(50%)"};
}
输出:
.foo {
transform: translateX(50%);
}