Media queries don't work with @lost variables

[elliottmangham]

Hello,

Is it possible - and if so how - to change @lost variables using media queries?

For example I have my gutter set to 30px:
@lost gutter 30px;

This works. However, I want to have my gutter set to 6vw on mobile and the follow does not work:

@lost gutter 30px;

@media screen and (max-width: 480px) {
	@lost gutter 7vw;
}

Please can you advise how to get this working?

Thank you.

[peterramsing]

@elliottmangham Simply put: this isn't something that LostGrid supports. LostGrid transpiles before it ever sees the browser so it doesn't adapt to media queries.

Action Steps:

1. You can support this on an individual basis with the following:

.foo {
  lost-column: 1/3 3 30px;
}
@media () {
  .foo {
    lost-column: 1/3 3 7vw;
  }
}

I suspect that isn't ideal for what you're intending here as that can get pretty tedious to write.

2. Build out support for if a global setting is set within a media query that LostGrid then duplicates each declaration with those different globals set. That has some possible downsides with CSS bloat. It could be pondered, though.

[elliottmangham]

Thanks @peterramsing for your informative answer, really helpful!

Your action step 1 is a good workaround, although I find that would generate a lot of unnecessary code as it would output the floats, margins, etc. for every media query.

Is it possible to modify only the gutter, for example:

.foo {
  lost-column: 1/3 3 30px;
}
@media () {
  .foo {
    lost-gutter: 7vw;
  }
}

Thanks again

[peterramsing]

@elliottmangham I did some work on this over the last week and it'd be quite complex to do. The nature of how LostGrid presently works this would be quite difficult. I'm not afraid of the difficulty that I'd be afraid of the fragility. There would be a lot of complexity to ensure that the gutters maintained the correct columns.

I could be convinced to do it, though, and it would be a really good excuse to refactor much some of the code to make it less fragile.

🤔

[elliottmangham]

Hey @peterramsing,

Thanks for looking into it!

It might be tedious to implement like you say, though I must argue that it would be a huge step towards writing DRY code. The benefit of modifying only one value (like gutter, for example) would mean that other values like floats, widths etc. are not output again and again for every media query.

A highly-responsive site might have several queries for every individual component, so I can see this being very useful.

I'd certainly love to hear your thoughts.

👍

[peterramsing]

@elliottmangham, this really is an interesting conversation. DRY has several meanings here. While the source code might be a little drier I can imagine having a solution for this work without configuration could bloat the exported CSS.

That said, I'm all for developer ergonomics. Let me see if a few months have given me some new ideas.

[peterramsing]

@elliottmangham, due to technical debt that I need to pay down, this isn't something that I can move forward on right now. I'll move it to the backlog, though, and maybe can come back to in after I work through some refactors.

[elliottmangham]

Hi @peterramsing, no worries! Thanks a bunch for looking into it!