Question

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

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

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

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

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

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

错误1-“媒体查询表达式必须以'（'）开头

第二种情况- 在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（“：预期的”）“后的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的混合

我要去哪里的任何指针？

Answer 1

第一种情况

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

About Interpolation

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

第二种情况

查看mixins如何与Sass一起使用。与Less完全不同。

About Mixins

第三种情况

对我有用。也许您应该删除空白。

vertical-translate(-50%);

从少转换后的scss语法问题

1 个答案: