I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration.

    button: {
      [MediaQueries.Medium]: ... 
    }

I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway