SASS variable with media query leads to "Invalid CSS after '@'"

user_907512 0
Viewed 83

Basic idea would be to define my media query in one place. My current attempt looks like so:

$mobile: "@media (max-width: 600px):not(#app.force-desktop)";


#{$mobile} {
  ...
}

However this results in the error: SassError: Invalid CSS after "@": expected selector, was "@media (max-width: " Setting $mobile to (for example) only :not(#app.force-desktop) seems to compile properly.

Maybe there is a different way how to solve this issue, which would be totally fine by me.

sass
1 Answers

You can just remove the @media:

$mobile: '(max-width: 600px):not(#app.force-desktop)';

@media #{$mobile} {
    body {
        color: blue;
    }
}
user_127019490
Related