propjockey / css-media-vars Goto Github PK

I think that it'd be beneficial to explain the syntax with a couple of sentences. For example, I quickly checked the documentation to see what --var2: var(--var1) value does, but couldn't find anything. It looks like a ternary?

I noticed there are no --media-lt-* or --media-gt-* variables. I think those would be useful.

F.e. instead of

.foo {
	--layout-mobile: var(--media-lte-sm) column;
	--layout-desktop: var(--media-md-lg, var(--media-xl)) row; /* not sure I did it right, but there isn't a variable that includes everything including anything gte xl, so this is complicated */
}

we could write

.foo {
	--layout-mobile: var(--media-lte-sm) column;
	--layout-desktop: var(--media-gt-sm) row;
}

We can't use --media-gte-sm because then it overlaps, whereas we want a non-overlapping distinction.

In the first example, I don't think var(--media-md-lg, var(--media-xl)) row even works, because then the final result is always initial, right? So with the lack of the -gt- and -lt- variables, a casual CSS user might not know exactly how to achieve that.

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. :)

This trick is really awesome and well used in css-media-vars, however I think it'd be easier to understand and use if you explained why it works — since guaranted-invalid-values are quite well specified.

Thanks and keep going <3