Use PostCSS :root variables with @lost variables

[elliottmangham]

Hello,

I want to be able to use my PostCSS variables as values for my @lost variables.

For example:

:root {
    --gutter: 30px;
}
@lost gutter var(--gutter);

This does not work however. Please can you advise if and how this is possible?

Thank you.

[peterramsing]

@elliottmangham, there are a couple of things going one here:

1. You're might transpiling your --gutter into an actual value for older browsers and that process happens after LostGrid is transpiled (if you convert that to 30px before LostGrid sees it then you shouldn't have any issues here.
2. LostGrid doesn't read CSS vars and it could easily be argued that it should.

Action Steps:

1. Try moving LostGrid to later in your transpilation process. That'll probably get you what you're looking for if you put it past css-cssnext which is what I suspect you're using.
2. We build out a new feature for supporting reading CSS Variables.

[elliottmangham]

Hi @peterramsing,

Thanks for your response. I will try step 1, though I would definitely support 2 in the future!

[peterramsing]

@elliottmangham, any update on whether or not option 1 helped?

Closing for now.