JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div>

</div>

SCSS

div {
  font-family: sans-serif;
  line-height: 1.5;
  font-size: 11px;

  span {
    display: block;
  }
}

JavaScript

var elements = [
  { "amenity": [ 'bar', 'library', 'car-rental', 'ferry-terminal', 'fuel', 'parking', 'bank', 'cinema', 'community-centre', 'court-house', 'embassy', 'police', 'post-office', 'town-hall' ] }, 
  { "barrier": ["gate-tollboth"] },
  { "building": ["apartments", "hotel", "house", "detached", "residential", "commercial", "industrial", "retail", "church", "civic", ""] }
];



$.each(elements, function(i, data) {
  $.each(data, function(key, val) {
    $.each(val, function(i) {
        $('div').append(
            "<span>@text-color-"+key+"-"+val[i]+"-day: #000;</span>"+ 
            "<span>@text-color-"+key+"-"+val[i]+"-night: #999;</span>" + 
            "<span>@text-color-"+key+"-"+val[i]+": animated(time-of-day, [0: @text-color-"+key+"-"+val[i]+"-day, 1: @text-color-"+key+"-"+val[i]+"-night]);" + 
            "<br>" +
            "</br>" +
            "<span>@text-outline-color-"+key+"-"+val[i]+"-day: #999;</span>"+
            "<span>@text-outline-color-"+key+"-"+val[i]+"-night: #000;</span>"+
            "<span>@text-outline-color-"+key+"-"+val[i]+": animated(time-of-day, [0: @text-outline-color-"+key+"-"+val[i]+"-day, 1: @text-outline-color-"+key+"-"+val[i]+"-night]);</span>"+
            "<hr>");
    });

  });

});