如何使用CSS函数名称的一部分(例如'translateY'中的'Y')作为变量?

时间:2014-06-03 23:38:49

标签: sass

不完全确定如何问这个,所以我将用代码演示:

我有一个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。

1 个答案:

答案 0 :(得分:3)

您想在此处使用字符串插值:

.foo {
  $foo: 'X';
  transform: #{"translate#{$foo}(50%)"};
}

输出:

.foo {
  transform: translateX(50%);
}