How to convert this less into sass? - sass

Question

This is from the .less file that comes with the npm package rc-slider (React Slider) https://github.com/react-component/slider/blob/master/src/Range.jsx
Examples of the slider: http://react-component.github.io/slider/examples/range.html
The error
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

Ah I got this to work, so far only some minor lint errors on naming convention, but it's not breaking now :)
#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);
}
}