如何将这个 less 转换成 sass？

Question

这是来自 npm 包 rc-slider (React Slider) 附带的 .less 文件 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);
  }
}

如何将这个 less 转换成 sass？

How to convert this less into sass?

sass

less