CODEWITHSUNDEEP
csssassmedia-queries
Gibin Thattayath George
Gibin Thattayath George

Reputation: 11

SCSS media query with interpolation

I am not able to use media query heading as a interpolation. While using it like the following it gives an error

$token-screen-md: "@media only screen and (min-width: 48rem)";
#{$token-screen-md} {
  display: table-row;
  min-width: 100%;
}

Could someone please help me to resolve this?

"Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. @media only screen and (min-width: 48rem){"

Upvotes: 0

Views: 1381

Answers (1)

Elissi
Elissi

Reputation: 332

$mobile: "only screen and (max-width : 767px)"; 
$tablet: "only screen and (min-width : 768px)";
$desktop: "only screen and (min-width : 1025px)";

@media #{$mobile} {
  /* my styles for mobile displays */
}`

Taken from How to target two media queries using SASS interpolation?

Upvotes: 2

Related Questions