sass - How can I use part of a CSS function name (eg. 'Y' from 'translateY') as a variable? -

not sure how ask one, i'll demonstrate code:

i have mixin i'm hoping can refactor:

@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%);   }  } 

instead of doing @if loop, i'd this:

transform: translate + $dir + (-50%); 

or

transform: translate+$dir(-50%); 

or

transform: translate + inspect($dir) + (-50%); 

but each of these outputs variation of this:

transform: translatey-50%; 

without parens.

you want use string interpolation here:

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

output:

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