SASS (gulp-sass) syntax problem - No output for @media with variable

Question

I use gulp-sass version 3.0.0 with Gulp version 3.9.1

I can't update Gulp for the moment.

When I use variable with @media I don't have output :

$screen-lg: 1200px;

$under-lg: "screen and (max-width: ($screen-lg - 1px))"; 

@media #{$under-lg} {
   width: 100%;
}

Do you know why ? Thank you.

Answer 1

Since the variable is inside of a string, you will have to use interpolation to get the result of $screen-lg - 1px:

$screen-lg: 1200px;

$under-lg: "screen and (max-width: (#{$screen-lg - 1px}))"; 

@media #{$under-lg} {
   width: 100%;
}