Media Queries & css variables - theme()

[robbiedavey]

Hi!

Just a quick question - as i'm testing out V4.0 on our starter repo and i'm implementing a media query based on a responsive variable defined in the config.

But i have run into a bit of sticking point, as you are unable to do this: (due to way the var() function works)

    @media screen and (min-width: var(--breakpoint-lg)) {
        padding: --spacing(12);
    }

So what I have done is this, using the theme() backwards compatibility.

    @media screen and (min-width: theme("screens.lg")) {
        padding: --spacing(12);
    }

I just wanted to check there is another way around this instead of manually adding in 64rem. As going forwards i'm not expecting theme() to be supported indefinitely, so would like to see if there is a solution to this, so I don't need to worry about it in the future

[philipp-spiess]

Hey! For places where CSS variables don't work sense, we still have the theme function. You'd use it like var in that case:

@media screen and (min-width: --theme(--breakpoint-lg)) {
      padding: --spacing(12);
  }