Variable system

Closed this issue 5 years ago · 1 comments

tenphi commented 5 years ago

By adding nu-attrs we introduced replacement for CSS classes in NUDE. With brand new Variable System we can simplify declarations with reusable variables.

<nu-block>
  <!-- declaration -->
  <nu-vars big-padding="3"></nu-vars>
  <!-- full usage syntax -->
  <nu-block padding="@big-padding"></nu-block>
  <!-- short usage syntax -->
  <nu-block padding="@big"></nu-block>
</nu-block>

Suffix -padding is optional 'cause NUDE can understand context (attribute name) and search for ${variableName}-${suffix} variable first. Usage of such variable in other attributes will require its full name.

This system can't use Custom Properties in implementation due to some limitations. So such variables can't be dynamic (responsive or depends on element state). But it still can be changed via attribute setting.

tenphi commented 5 years ago

Done. Brand new variable system has great support for responsive system and can be used in certain decorators.