CODEWITHSUNDEEP
csssassgulp-sassscss-mixins
Aditya
Aditya

Reputation: 431

Issue with scss syntax after conversion from less

My task is to convert all less to scss files . I used npm dependency "less-scss-convertor" for the same .

But when i am creating scss files i am getting these three errors repeatedly .

1st scenario - In my common.scss i have defined 

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

in some other scss file i am using -

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

error1 - "media query expression must begin with '('"

2nd scenario - In 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));
}

error 2 - Invalid CSS after "...te-color-class(": expected ")", was '"black", 1, 2);'

3rd scenario - 

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

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

error 3 - no mixin named vertical-translate

Any pointers where i am going wrong ?

Upvotes: 1

Views: 205

Answers (1)

Quentin
Quentin

Reputation: 3289

1st scenario

You need to use the interpolation syntax of Sass: #{$var}

About Interpolation

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


2nd scenario

See how mixins work with Sass. It's very different from Less.

About Mixins


3rd scenario

It works for me. Maybe you should remove the white space.

vertical-translate(-50%);

Upvotes: 3

Related Questions