如何将此转换为sass？

Question

这是来自npm包附带的.less文件rc-slider（React Slider）https://github.com/react-component/slider/blob/master/src/Range.jsx

滑块的例子：http://react-component.github.io/slider/examples/range.html

错误

205 | 。@ {className} -enter，。@ {className} -appear {

.motion-common() {
  animation-duration: .3s;
  animation-fill-mode: both;
  display: block !important;
}

.make-motion(@className, @keyframeName) {
  .@{className}-enter, .@{className}-appear {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
  }
}
.zoom-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter, .@{className}-appear {
    transform: scale(0, 0); // need this by yiminghe
    animation-timing-function: @ease-out-quint;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-quint;
  }
}
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}

Answer 1

啊，我得到了这个工作，到目前为止只有一些轻微的lint错误的命名约定，但它现在没有破坏:)

@motion-common() {
  animation-duration: .3s;
  animation-fill-mode: both;
  display: block !important;
}

@make-motion($className, $keyframeName) {
  $className {
    &-enter, &-appear {
      @motion-common();
      animation-play-state: paused;
    }
    &-leave {
      @motion-common();
      animation-play-state: paused;
    }

    &-enter.&-enter-active,
    &-appear.&-appear-active {
      animation-name: ~"${keyframeName}In";
      animation-play-state: running;
    }

    &-leave.&-leave-active {
      animation-name: ~"${keyframeName}Out";
      animation-play-state: running;
    }
  }
}

@zoom-motion($className, $keyframeName) {
  @make-motion($className, $keyframeName);

  $className {
    &-enter, &-appear {
      transform: scale(0, 0); // need this by yiminghe
      animation-timing-function: $ease-out-quint;
    }
    &-leave {
      animation-timing-function: $ease-in-quint;
    }
  }
}

@zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}