Проблема с синтаксисом scss после преобразования из менее

Question

Моя задача - конвертировать все меньше в файлы scss.Я использовал npm-зависимость "less-scss-convertor" для того же.

Но когда я создаю scss-файлы, я получаю эти три ошибки неоднократно.

1-й сценарий - в моем common.scssя определил

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

в каком-то другом scss-файле, который я использую -

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

error1 - "выражение медиа-запроса должно начинаться с '('"

2ndсценарий - В 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 - Неверный CSS после "... te-color-class (": Ожидается ")", был "черный", 1, 2);'

3-й сценарий -

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

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

ошибка 3 - нет mixin с именем vertical-translate

Есть какие-нибудь указатели, где я иду не так?

Answer 1

1-й сценарий

Вам необходимо использовать синтаксис интерполяции Sass: #{$var}

Об интерполяции

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

2-й сценарий

Посмотрите, как работают миксины с Sass.Это очень отличается от Меньше.

О миксин

3-й сценарий

У меня работает.Может быть, вам следует удалить пробел.

vertical-translate(-50%);