Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
Suppose there's a general concept of "named breakpoints" as a property value, something like:
<named-breakpoints> := <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident> ]*
<breakpoint> := <number> | 'portrait' | 'square' | 'landscape' (etc…)
So that things like this are possible:
*/
example {
--breakpoints: 0 small 200px medium 500px large;
}
/*
as well as omitting the first <breakpoint> and having <zero> as the value if it's missing.
This would mean the same thing:
*/
example {
--breakpoints: small 200px medium 500px large;
}
/*
The question is: if you have breakpoints for more than one condition,
like --width and --height in the next example, and you wanted to express
a list of both in a shorthand, a list of named breakpoints with their condition name,
how would you separate the condition name from the named breakpoints?
What should <condition-name> be?
<breakpoint-list> := <condition-name> <named-breakpoints> [ ',' <condition-name> <named-breakpoints> ]*
*/
example {
--width: small 100px large;
--height: short 100px tall;
}
shorthand {
--breakpoints:
width small 100px large,
height short 100px tall
;
}
/* Tab's suggestion, possibly also with commas inside the function too */
long form {
--custom-width: --breakpoints(small 100px large);
--custom-height: --breakpoints(short 100px tall);
}
shorthand {
--custom-breakpoints:
width --breakpoints(small 100px medium),
height --breakpoints(short 100px tall)
;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment