0

I'm hitting a error when I use a variable for a media query. I have trivially reproed the issue here:

$media-xs: screen and (max-width: 480px);

// no errors
@media screen and (max-width: 480px) {
  .blu { color: blue; }
}

// throws error
@media #{$media-xs} {
  .blu { color: blue; }
}

The output when I run this via CLI is:

$ sass test.scss test.css

Error: (max-width: 480px) isn't a valid CSS value.
   ╷
13 │ @media #{$media-xs} {
   │          ^^^^^^^^^
   ╵
test.scss 13:10  root stylesheet
gkl
  • 199
  • 2
  • 11
  • Hi, a think u need use "" ```scss $media-xs: "screen and (max-width: 480px)"; // no errors @media screen and (max-width: 480px) { .blu { color: blue; } } // no errors @media #{$media-xs} { .blu { color: blue; } } ``` – Valery Nosareu Jun 22 '23 at 18:17
  • This isn't possible according to these answers: https://stackoverflow.com/search?q=%5Bsass%5D+variable+media+query – A.L Jun 22 '23 at 18:33
  • Does this answer your question? [Using Sass Variables with CSS3 Media Queries](https://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – A.L Jun 22 '23 at 18:34
  • @A.L. TY, I reviewed "Using Sass..." and a linked one, but they were not this issue. They dealt with modifying vars inside queries. – gkl Jun 22 '23 at 19:04
  • @Valery TY, Your suggestion to quote the query value worked out. I also found that I could concat in another variable. My actual environment is more complex and the actual value comes from another var. It looked like this: `scss $media-xs: "screen and (max-width: 480px)";` I want to find documentation to support this and I'll post it as an answer unless one is submitted in a day. – gkl Jun 22 '23 at 19:08

0 Answers0