How to use YAML front matter variables in a CSS file to define colors using variables in Jekyll, using Liquid tags. This example uses HSL colors with hex fallback colors. The goal here is to create standardized CSS with a color palette that can easily be extended to a whole file and maintained easily with only a few variables. The same thing cou…

jekyll-css-yaml-colors.css

---
white: 
  hsl: 'hsla(138, 10%, 98%, 1)'
  hex: '#f9fafa'
black:
  hsl: 'hsla(138, 16%, 10%, 1)'
  hex: '#151e18'
green:
  hsl: 'hsla(138, 39%, 54%, 1)' 
  hex: '#5cb777'
---

html {
  background: {{ page.white.hex }};
  background: {{ page.white.hsl }};
  color: {{ page.black.hex }};
  color: {{ page.black.hsl }};
}

a {
  color: {{ page.green.hex }}
  color: {{ page.green.hsl }}
}

wonderful that nowadays we have custom properties in CSS!