drifting walrus
const small_breakpoint = "min-width: 576px";
...
@media ({small_breakpoint}) {
...
My goal is to set my breakpoints in an external file, and refernce the values in my css. Standard css vars do NOT work in media queries. That is as designed it turns out. But seems like astro templates should inject my breakpoint values.
My original version that was using astro variables was:
@media( min-width: {small_breakpoint}) { ...
But that didn't work either..
trim echo
If you're trying to pass variables from the frontmatter to the style tag, I think you need this
https://docs.astro.build/en/reference/directives-reference/#definevars
drifting walrus
Perfect pointer to the right docs. It turns out that when you use define:vars inside of a script tag, as shown in the docs, it converts that to a CSS var, which you can't use in the context of a media query.
I guess it's true that I don't change my breakpoints enough to get this sorted out, I'll just set them manually. Guilty of some premature optimizations!
trim echo
Can you use SCSS? If so you could make a breakpoints.scss and import in all files using Vite
astro.config.mjs
export default defineConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/breakpoints.scss";',
},
},
},
},
});
I'm using something like this rn and so far didn't notice any problem!
drifting walrus
Thanks! Good idea!!