/* | |
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