Working with YAML Data

Scraped from the great write up by @KatieMFritz https://gist.github.com/KatieMFritz/3195810f047f199bb8e320c26bdf3c5b

Color swatches from YAML array for Pattern Lab Node edition

colors.mustache

<ul class="sg-colors">
  {{#colors}}
  <li>
    <span class="sg-swatch" style="background: {{ hex-code }}"></span>
    <span class="sg-label">{{ color-name }}</span><br>
    <span class="sg-label">{{ hex-code }}</span>
  </li>
  {{/colors}}
</ul>

colors.yaml

colors:
  - color-name: $color-primary
    hex-code: '#1997a9'
  - color-name: $color-secondary
    hex-code: '#439539'
  - color-name: $color-accent
    hex-code: '#f89728'
  - color-name: $color-text
    hex-code: '#6d6e71'
  - color-name: $color-gray-light
    hex-code: 'hsl(225, 4%, 95%)'
  - color-name: $color-black
    hex-code: '#000'