SCSS Transitions mixin

by Artem

HTML

<div>Hello</div>

CSS

div {
  font-size: 25px;
  font-family: sans-serif;
  width: 200px;
  height: 200px;
  background-color: orange;
  color: blue;
  transition: color 0.3s ease-in-out , background 0.3s ease-in-out;
}

div:hover {
  background-color: black;
  color: green;
}

JavaScript

'use strict';

@mixin transition2($transitions...) {
    $list-props: 'transition-property' 'transition-duration' 'transition-timing-function';
    $list-props-d: 'all', 3s, unquote('ease-in-out');
    $list-property: ();
    $length: length($list-props);
    
    @each $transition in $transitions {
      $idx: index($transitions, $transition);
      @for $i from 1 through $length {
        $prop: null;
        @if ($i <= length($transition)) {
          $prop: nth($transition, $i);
        } @else {
          $prop: nth($list-props-d, $i);
        }
        $list-property: append($list-property, $prop);
      }
      
      @if ($idx < $length - 1) {
        $list-property: append($list-property, unquote(','));  
      }
    }

    transition: $list-property;
}