Doesn't work

[lon9man]

your example doesn't work in PhpStorm, 500-200 and 548 unrecognized also, it wants string to be there.

sass --version
1.27.0 compiled with dart2js 2.10.1

example:

@import 'mixin';
.transition{
    transition: all .3s;
};
body {
    @include media((
        margin: '10px 0',
        width: 100%,
        height: (all: 120px, 500-200: 100%, sm: 50%, 548: 10%, print: 10cm),
        font-size: (sm: 12px),
        extend: '.transition',
        transform: (lg: rotate(45deg)),
        background: (
                lg: url('../images/pict.png') center center/cover no-repeat,
                sm-lg: url('../images/pict1.png') center center/cover no-repeat
        )
    ));
}

result:

body {
  margin: 10px 0;
  width: 100%;
}
@media only screen and (max-width: "all"px) {
  body {
    height: 120px;
  }
}
@media only screen and (max-width: "300"px) {
  body {
    height: 100%;
  }
}
@media only screen and (max-width: "sm"px) {
  body {
    height: 50%;
  }
}
@media only screen and (max-width: "548"px) {
  body {
    height: 10%;
  }
}
@media only screen and (max-width: "print"px) {
  body {
    height: 10cm;
  }
}
@media only screen and (max-width: "sm"px) {
  body {
    font-size: 12px;
  }
}
@media only screen and (max-width: "lg"px) {
  body {
    transform: rotate(45deg);
  }
}
@media only screen and (max-width: "lg"px) {
  body {
    background: url("../images/pict.png") center center/cover no-repeat;
  }
}
@media only screen and (min-width: "smpx) and (max-width: lg"px) {
  body {
    background: url("../images/pict1.png") center center/cover no-repeat;
  }
}