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%); }
Comments
Post a Comment