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-500', 30 hex: '#0a7d06' 31 } 32 ] 33 }; 34 } 35}; 36</script> 37 38<style lang="scss"> 39 @import "./colors.scss"; 40</style> 41