Read custom properties

[yuanchuan]

Example

<css-doodle>
  --colors: red, blue, green;

  /* Suppose there's @get() */
  color: @pick(@get(--colors));

   /* or better? */
  colors: @pick(--colors);
</css-doodle>

Function name

Need to introduce a new function name since @var has been taken already.

Related

#33, #30

[yuanchuan]

I'm happy to find there's another usage for custom properties via use attribute:

<style>
  css-doodle {
    /* palette */
    --colors: red, blue, green;

    --rule: (
      background-color: @p(var(--colors));
      border-color: @pn(var(--colors));
    );
  }
</style>

<css-doodle use="var(--rule)"></css-doodle>

[yuanchuan]

Or write css-doodle function inside custom properties:

<style>
  css-doodle {
    /* it's like defining a function */
    --color: @p(#e4fffe, #a4f6f9, #ff99fe, #ba52ed);

    --rule: (
      /* call the function */
      background: var(--color);

      /* call the function */
      border: 2vmin solid var(--color);
    );
  }
</style>

<css-doodle use="var(--rule)"></css-doodle>