Issue with scss syntax after conversion from less - css

Question

My task is to convert all less to scss files . I used npm dependency "less-scss-convertor" for the same .
But when i am creating scss files i am getting these three errors repeatedly .
1st scenario -
In my common.scss i have defined
$S: "all and (max-width: 767px)";
in some other scss file i am using -
#media $S {
.test-class {
font-size: 8px;
}
}
error1 - "media query expression must begin with '('"
2nd scenario -
In color.scss -
#mixin test-class("black", 1, 2);
#mixin generate-color-class($color, $arg1,
$arg2) when ($arg2 > 0) {
.${color}-${arg1} {
color: ~"${${color}-${arg1}}";
}
#include generate-color-class($color,
($arg1 + 1), ($arg2 - 1));
}
error 2 - Invalid CSS after "...te-color-class(": expected ")", was '"black", 1, 2);'
3rd scenario -
#mixin vertical-translate($percent) {
-ms-transform: translateY($percent);
-webkit-transform: translateY($percent);
transform: translateY($percent);
}
.Headerclass {
#include vertical-translate (-50%);
}
error 3 - no mixin named vertical-translate
Any pointers where i am going wrong ?

Answer 1

1st scenario
You need to use the interpolation syntax of Sass: #{$var}
About Interpolation
#media #{$S} {
.test-class {
font-size: 8px;
}
}
2nd scenario
See how mixins work with Sass. It's very different from Less.
About Mixins
3rd scenario
It works for me. Maybe you should remove the white space.
vertical-translate(-50%);