How to use Multi-property css variable?

Question

I need some documention or explanation on how this css variable with multiple property works.

<custom-style>
  <style>
    html {
      --paper-font-common-base: {
        font-family: sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      ;
    }
  </style>
</custom-style>

my problem is not with this specific piece of code, I have worked with css variables before but this is the first time I see something like this and I have no Idea what it is or how it works.

Answer 1

this is the way your can define custom css properties with polymer. https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties