css - 从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;
    }
}

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 - "...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}

关于插值

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

第二种情况

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

关于 Mixin

第三种情况

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

vertical-translate(-50%);