从less转换后的scss语法问题

Question

我的任务是将所有较少的内容转换为scss文件。我使用了npm依赖“less-scss-convertor”。

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

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

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

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

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

error1 - “媒体查询表达式必须以'（''开头

第二种情况 - 在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 - “... the-color-class（”：expected“）”之后的CSS无效，是“黑色”，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;
    }
}

第二种情况

看看mixins如何与Sass一起工作。它与Less非常不同。

About Mixins

第三种情况

这个对我有用。也许你应该删除空白区域。

vertical-translate(-50%);