Generated by SassMeister.com.

input.scss

// Easings
$ms-animation-ease-1: cubic-bezier(0.1,0.9,0.2,1) !default;
$ms-animation-ease-2: cubic-bezier(0.1,0.25,0.75,0.9) !default;

// Durations
$ms-animation-duration-1: 0.167s !default;
$ms-animation-duration-2: 0.267s !default;
$ms-animation-duration-3: 0.367s !default;
$ms-animation-duration-4: 0.467s !default;

// Outputs the properties for an animation.
@mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
  // Set a default value for the version-scoped variable if it isn't assigned.
  $ms-fabric-version-suffix: '' !default;
  // Append the scoping suffix to each animation name.
  $namelist: ();
  @each $name in $names {
    $newname: $name#{$ms-fabric-version-suffix};
    $namelist: append($namelist, $newname, 'comma');
  }

  // Output the animation's properties.
  animation-name: $namelist;
  animation-duration: $duration;
  animation-timing-function: $timing;
  animation-fill-mode: $fillMode;
}

body {
    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
}

output.css

body {
  animation-name: ms-fadeIn, ms-slideLeftIn40;
  animation-duration: 0.367s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}