0

I am trying to convert from CSS to SASS and having trouble making a vendor prefix mixin for the transform property only. Any help or pointers is appreciated as I can't see where I am going wrong and I have tried Googling around with no luck.

Issue - Once SASS has processed it is stripping out the vendor prefix where it only includes the transform property.

Bellow is the sample output I am trying to achieve -

-webkit-transform: rotate(-45deg) translate(-9px, 6px); 
    -ms-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);

Mixin -

@mixin transform-prefix($values...) {
  @each $vendor in ('-webkit-', '-ms-', '') {
    #{$vendor}transform: #{$values};
  }
}
    
&.active .line1 {
  @include transform-prefix(rotate(-45deg), translate(-9px, 6px));
}

Output -

.slide-nav-button.active .line1 {
  transform: rotate(-45deg), translate(-9px, 6px);
}

I have also tried this mixin but it strips out the prefix -

@mixin transform-prefix($values...) {
  -webkit-transform: $values;
      -ms-transform: $values;
          transform: $values;
  }
JayP1986
  • 13
  • 4
  • Just tried this but without the comma: `transform-prefix(rotate(-45deg) translate(-9px, 6px));` and it outputs with the prefixes – Daniel_Knights Nov 19 '20 at 14:06
  • @Daniel_Knights - I still get the same output after changing to your suggestion. I am currently using Live SASS compiler extension in VS Code if this info helps in anyway. – JayP1986 Nov 19 '20 at 14:14
  • 1
    I am going to answer my own post here but it's to do with Live SASS Compiler settings. https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md Answer can be found in here. – JayP1986 Nov 19 '20 at 14:19

1 Answers1

0

I know I'm late to respond. but I'm going to fix this by only moving transform: into the first line of mixin look like this

@mixin myBox($rot) {
  transform: $rot;
  -webkit-transform: $rot;
  -ms-transform: $rot;
   }
Ibrahem Ahmad
  • 1