Re: [csswg-drafts] [css-values]: Express conditional values in a more terse way (#5009)

@tabatkins is correct in that `nth-value()` (known as `index()` elsewhere) would be “almost certainly var()-like”. I think that in most cases, authors would keep both, the numeric index (or possibly textual key) and the set of values, in variables. Therefore, it would make sense, instead of introducing semicolons as separators inside property values, which would very likely trip off several linters, syntax highlighters etc., to introduce array-like variables, e. g. like so:

~~~~ css
:root 
{
  --foo: 1em;
  /* index-value array, list, enumeration, ordered set or sequence */
  --bar[1]: 0.707em;
  --bar[2]: 1.0em;
  --bar[3]: 1.414em;
  /* key-value array, map or unordered set */
  --baz[light-low]: red;
  --baz[dark-low]: blue;
  --baz[light-high]: yellow; 
} 
*
{
  --index: 1;
  --key: light-low;
  font-size: arr(--bar, var(--index));
  color: arr(--baz, var(--key));

  /* optional but logical consequences: */
  line-height: avg(arr(--bar)); /* functions that collapse an arbitrary number of values into a single one, either by selection or by calculation */
  padding: arr(--bar space); /* using a list of values with a predefined separator */
  background: linear-gradient(sort(arr(--baz comma), hue));
} 
~~~~

Iʼm not sure whether [css-syntax](https://drafts.csswg.org/css-syntax/#declaration-diagram) would allow the square brackets there without modification. 

PS: 🏴‍☠️
PPS: I need to read up on [WHATWG data structures](https://infra.spec.whatwg.org/#data-structures) to get the terms right. 

-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-634457610 using your GitHub account

Received on Wednesday, 27 May 2020 06:30:53 UTC