0

I'm using Next.js 9.53

I use the basic CSS module support that comes with Next.js - no CSS pre-processor (less, sass, etc.) and no CSS-in-JS (styled-components etc.)

At the moment, I write my CSS mobile-first and then have a bunch of redundant media queries looking like:

/* "desktop" */
@media screen and (min-width: 1024px) {
  ...
}

I have redundant copies of that media query in a few different modules. I like having the alternative styles close to the CSS that defines the default styling. But I don't like the "magic number" aspect of that query.

I do also have a set of "global" CSS, where I define a few high-level things and also some CSS variables that I then re-use throughout all the module CSS to avoid spreading around magic numbers (colors, mostly). But CSS variables don't work for media queries, as explained in this SO answer.

Is there some way similar to CSS variables that I can share my size breakpoints across a bunch of different media queries?

  • I want to keep my alternative CSS queries near their default counterparts (i.e. I don't want to centralise the alternative CSS from all the different modules into one place).
  • I'd prefer a simple solution to this if possible - I'd rather not make large changes to my build process just for this (like introducing a CSS pre-processor).
Shorn
  • 19,077
  • 15
  • 90
  • 168
  • I have no knowledge of next.js, but maybe this [HTML media Attribute](https://www.w3schools.com/tags/att_media.asp) (not `@media {...}`, but `media="..."`) will give you a 'eureka-moment'. Also a `......` and enable/disable/toggle the alternative styles in JS using any kind of trigger (user click, doc resize, doc load, db read, etc). AND: ` – Rene van der Lende Sep 05 '20 at 01:38
  • To add insult to injury: you could opt to get rid of media queries completely and start using *linear equations (generic: **y=mx+b**)* for anything responsive sizing related, but that will require some learning and 'getting used to'. A simple example is my `html { font-size: calc(0.625vmin + 0.75rem) }`. On a 320x480px screen fontsize is 14px, on a 1920x1280px screen it will be 20px (and all other sizes inbetween), no MQ required. Works for any CSS attribute that accepts `calc()`. – Rene van der Lende Sep 05 '20 at 01:52
  • Check out my very WIP [Github LinearToCalc](https://github.com/renevanderlende/ers-css-js-lineartocalc), it uses the above abundantly without ANY MQ, even the 'Code at Github' ribbon. Still, the page is designed to fit 320x480 (mobile portrait) as well as 1920x1200 (desktop landscape). Download the repo, unpack and run 'ers-lineartocalc-doc.html' locally. Halfway the page is a tool that creates 'calc()' with a *linear equation* for you. Make sure to try **all** the toggles. Use as-is... – Rene van der Lende Sep 05 '20 at 02:02

2 Answers2

1

From the spec,

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

So no, you can't use it in a media query.

Raul Valverde
  • 587
  • 4
  • 11
1

You can accomplish this with matchMedia.

I gave a usage example in this answer.

You could store the shared breakpoint in a javascript variable and use it in multiple media queries.

grandinero
  • 1,155
  • 11
  • 18
  • This is looks like it answers the spirit of my question, though I've not tried it out yet. – Shorn Aug 26 '21 at 03:59