peterramsing/lost

Media queries don't work with @lost variables

Open

#407 opened on Mar 19, 2018

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (4,506 stars) (177 forks)batch import
component: corehelp wantedstatus: Backlogtype: Enhancement

Description

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.

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic CSS knowledgeLostGrid usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the LostGrid source code (likely src/lib/lost.js) to understand how @lost variables are processed. Determine if the plugin currently ignores @lost rules inside @media blocks due to a missing media query context. Review existing comments in issue #407 and any related tests. Consider modifying the rule parsing to inherit parent media query conditions when evaluating variable declarations.
Media queries don't work with @lost variables · peterramsing/lost#407 | Good First Issue