1<template> 2 <div> 3 <div class="color-tile-container"> 4 <div v-for="color in colors"> 5 <div 6 :style="{ backgroundColor: color.hex }" 7 :class="{ 'color-tile--border': color.border }" 8 class="color-tile" 9 ></div> 10 <dl class="color-tile-desc"> 11 <dt>Color variable:</dt> 12 <dd>${{ color.variable }}</dd> 13 </dl> 14 <dl class="color-tile-desc"> 15 <dt>Hex:</dt> 16 <dd>{{ color.hex }}</dd> 17 </dl> 18 </div> 19 </div> 20 </div> 21</template> 22 23<script> 24export default { 25 data() { 26 return { 27 colors: [ 28 { 29 variable: 'green-100', 30 hex: '#ecfdf1', 31 }, 32 { 33 variable: 'green-500', 34 hex: '#0a7d06' 35 } 36 ] 37 }; 38 } 39}; 40</script> 41 42<style lang="scss"> 43 @import "./colors.scss"; 44</style> 45