DEV Community

Discussion on: JSSheet - A javascript to css parser

Collapse
 
alohci profile image
Nicholas Stimpson

Nice start. Any idea how you'll add media queries?

Collapse
 
nicolalc profile image
Nicola

I'm still thinking about a solution.
The first idea in my mind is the following:

Add a mediaQuery property for an object:

{
  [...]
  mediaQuery: [
    selector: 'screen and (max-width: 600px)',
    ...props
  ]
}

So this will render a @media rule for each object.

What do you think about this proposal?

Another solution is to create a separate jss file (e.g. body-600.js) wich defines the media query for the body partial.

Collapse
 
nicolalc profile image
Nicola

I've done it, you can find the new mq management here:
github.com/NicolaLC/js-sheet/commi...

Now if yout take a look to the website ( nicolalc.github.io/jssheet/ ) you will see a MediaQuery helper at the bottom right side of the window, wich will change with the screen size.