First of all, this is amazing! It is super useful!!
I have the following, which works:
@import 'https://unpkg.com/[email protected]/css-media-vars.css';
.face_container {
--margin-left-mobile: var(--media-xs) 0;
--margin-left-desktop: var(--media-lte-sm) 20px;
--margin-top-mobile: var(--media-xs) 20px;
--margin-top-desktop: var(--media-lte-sm) 0;
margin-left: var(--margin-left-mobile, var(--margin-left-desktop));
margin-top: var(--margin-top-mobile, var(--margin-top-desktop));
}
Is there a more concise way to write it?
I guess maybe another question is can we make the equivalent of a NOT
operator, and flip the mobile-desktop values, instead of writing two new variables, or something?
Based on your circuit example with the number display, I think the answer is we can. The syntax just isn't fully clear to a casual CSS user like me. :)