从 less 转换后出现 scss 语法问题

Question

我的任务是将所有 less 转换为 scss 文件。我对相同的 .

使用了 npm 依赖项 "less-scss-convertor"

但是当我创建 scss 文件时，我反复遇到这三个错误。

第一种情况 - 在我的 common.scss 中，我定义了

$S: "all and (max-width: 767px)";

在我正在使用的其他一些 scss 文件中 -

@media $S {
    .test-class {
        font-size: 8px;
    }
}

错误 1 - "media query expression must begin with '('"

第二种情况 - 在 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));
}

错误 2 - 在“...te-color-class(": expected ")" 之后无效 CSS，是 '"black", 1, 2);'

第三种情况 -

@mixin vertical-translate($percent) {
    -ms-transform: translateY($percent);
    -webkit-transform: translateY($percent);
    transform: translateY($percent);
}

.Headerclass {
    @include vertical-translate (-50%);
 }

错误 3 - 没有名为 vertical-translate 的 mixin

我哪里出错了？

Answer 1

场景一

需要使用Sass的插值语法：#{$var}

About Interpolation

@media #{$S} {
    .test-class {
        font-size: 8px;
    }
}

场景二

查看 mixin 如何与 Sass 一起工作。和Less很不一样。

About Mixins

第三种情况

对我有用。也许你应该删除白色 space.

vertical-translate(-50%);

从 less 转换后出现 scss 语法问题

Issue with scss syntax after conversion from less

css

sass

gulp-sass

scss-mixins