my-jetbrains-settings/templates/Zen CSS.xml

<templateSet group="Zen CSS">
  <template name="dc" value="display: flex;&#10;flex-direction: $END$;&#10;justify-content: center;&#10;align-items: center;" description="Display contents in the center using flex" toReformat="false" toShortenFQNames="true">
    <context>
      <option name="CSS_DECLARATION_BLOCK" value="true" />
    </context>
  </template>
  <template name="df" value="display: flex;&#10;flex-direction: $FD$;&#10;justify-content: $JC$;&#10;align-items: $AI$;" description="display flex" toReformat="false" toShortenFQNames="true">
    <variable name="FD" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="JC" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="AI" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="CSS" value="true" />
    </context>
  </template>
  <template name="bgcv" value="background-color: var(--$END$)" description="background colour with variable" toReformat="false" toShortenFQNames="true">
    <context>
      <option name="CSS" value="true" />
    </context>
  </template>
</templateSet>