Search code examples
cachingmedia-queriesstylus

Stylus +cache not allowing formatted strings

I don't understand why something like this occurs based off this article

+media(s("'(min-width: %spx)'", $max-padding)) // doesn't work
+media('(max-width: ' + $max-padding + 'px)') // sloppy but works

The top compiles to the correct thing in the command line, but the +cache doesn't accept it

Solution

  • That happens because s() outputs literal token instead of a string one. The most simple way of fixing it would be to ensure the $condition inside a media mixin is a string, so you can add

    $condition = '' + $condition

    at the start of it, and then use the s() the way you use it, but without the extra quotes:

    +media(s("(min-width: %spx)", $max-padding))

    Also, a hint: there is a % operator that works almost exactly like s(), but can be cleaner, plus the apply_media_cache mixin is smart enough, so you could omit the braces too:

    +media("min-width: %spx" % $max-padding)