3

Is it possible to have SCSS render a transform property like rotate() with a dynamic variable? To be clear, I'm NOT asking how to create a dynamic mixin or variable. I'm asking the appropriate way to interpolate transform properties like rotate() and not lose the brackets.

For example, albeit contrived, I'd like to do something like:

@mixin dynamic-var($target, $property, $val) {
    .class { 
        $target: $property($val * 10);
    }
}

@include dynamic-var('transform', 'rotate', '36deg');

To produce:

.class { transform: rotate(360deg); }
Alec Sibilia
  • 847
  • 2
  • 10
  • 22
  • I think this feature was declined: https://github.com/sass/sass/issues/857 – TylerH Jan 13 '16 at 17:14
  • 1
    you can try using variable interpolation, but it can be very glitchy particularly with the use of operators so i advise thorough testing. – marblewraith Jan 13 '16 at 17:16
  • This question is marked as a duplicate, however the provided link to solutions is incorrect. I solved my problem by using `#{'#{$property}(#{$val * 10})'}` – Alec Sibilia Jan 13 '16 at 17:29
  • So then a duplicate of this question: http://stackoverflow.com/questions/23341431/sass-scss-parentheses-within-mixin – cimmanon Jan 13 '16 at 18:06

0 Answers0