Render the pieces with background images

app/components/chess-piece.vue

@@ -1,19 +1,16 @@
 <template>
-  <div class="board-square">
+  <div class="board-square" :class="classes(piece)">
-    <img v-if="piece != null" :src="pieceImage(piece)">
   </div>
 </template>
 
 <script>
 export default {
   methods: {
-    pieceImage: (piece) => {
+    classes: (piece) => {
-      return "/images/"
+      if (piece != null) {
-        + piece.type
+        return [piece.type, piece.colour];
-        + "_"
+      }
-        + piece.colour
+    },
-        + ".svg";
-    }
   },
 
   props: ["piece"]

app/styles/main.scss

@@ -10,6 +10,9 @@ $white-square-color: #d0bfa1;
 
 $square-outline-color: darken($black-square-color, 20%);
 
+$colours: black white;
+$pieces: king queen bishop knight rook pawn;
+
 .board {
   display: inline-block;
   font-size: 0;
@@ -24,19 +27,25 @@ $square-outline-color: darken($black-square-color, 20%);
   width: $board-square-size;
   height: $board-square-size;
 
-  img {
+  background-size: 100%;
-    position: absolute;
+  background-repeat: no-repeat;
-    margin: 0;
+  background-position: center;
-    width: $board-square-size;
+
+  @each $colour in $colours {
+    @each $piece in $pieces {
+      &.#{$colour}.#{$piece} {
+        background-image: url(/images/#{$piece}_#{$colour}.svg);
+      }
+    }
   }
 }
 
 %black-square {
-  background: $black-square-color;  
+  background-color: $black-square-color;
 }
 
 %white-square {
-  background: $white-square-color;
+  background-color: $white-square-color;
 }
 
 .board-row:nth-child(odd) {