Convert more components to Sass

src/components/CharacterGrid/index.scss

@@ -10,18 +10,13 @@
     margin: 0;
     padding: 0;
     width: 761px;
-}
 
-#grid_characters > * {
-    margin-bottom: 24px;
-    margin-right: 24px;
+    & > * {
+        margin-bottom: 24px;
+        margin-right: 24px;
+    }
 
-}
-
-#grid_characters > li {
-    list-style: none;
-}
-
-#grid_characters > li:last-child {
-    margin: 0;
+    & > li:last-child {
+        margin: 0;
+    }
 }

src/components/SummonGrid/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import SummonUnit from '~components/SummonUnit'
 
-import './index.css'
+import './index.scss'
 
 // GridType
 export enum GridType {

src/components/SummonUnit/index.css

@@ -1,90 +0,0 @@
-.SummonUnit {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.SummonUnit .SummonImage {
-    background: white;
-    border: 1px solid rgba(0, 0, 0, 0);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    transition: all 0.18s ease-in-out;
-}
-
-.SummonUnit.editable .SummonImage:hover {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
-    cursor: pointer;
-    transform: scale(1.1, 1.1);
-}
-
-.SummonUnit.filled h3 {
-    display: block;
-}
-
-.SummonUnit.filled ul {
-    display: flex;
-}
-
-.SummonUnit h3,
-.SummonUnit ul {
-    display: none;
-}
-
-.SummonUnit h3 {
-    color: #333;
-    font-size: 14px;
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-}
-
-.SummonUnit img {
-    position: relative;
-    width: 100%;
-    z-index: 2;
-}
-
-.SummonImage .icon {
-    position: absolute;
-    color: #c9c9c9;
-    height: 20px;
-    width: 20px;
-    z-index: 1;
-}
-
-.SummonImage:hover .icon {
-    color: #555;
-}
-
-/* Mainhand */
-.SummonUnit.main,
-.SummonUnit.friend {
-    margin-right: 24px;
-    max-width: 200px;
-}
-
-.SummonUnit.friend {
-    margin-right: 0;
-}
-
-.SummonUnit.main .SummonImage,
-.SummonUnit.friend .SummonImage {
-    height: 374px;
-    width: 180px;
-}
-
-/* Grid */
-.SummonUnit.grid {
-    max-width: 160px;
-}
-
-.SummonUnit.grid .SummonImage {
-    list-style-type: none;
-    height: 92px;
-    width: 160px;
-}

src/components/SummonUnit/index.scss

@@ -0,0 +1,92 @@
+.SummonUnit {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .SummonImage {
+        background: white;
+        border: 1px solid rgba(0, 0, 0, 0);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        transition: all 0.18s ease-in-out;
+
+        &:hover .icon {
+            color: #555;
+        }
+
+        .icon {
+            position: absolute;
+            height: 20px;
+            width: 20px;
+            z-index: 1;
+    
+            svg {
+                fill: #c9c9c9;
+            }
+        }
+    }
+
+    &.editable .SummonImage:hover {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        cursor: pointer;
+        transform: scale(1.1, 1.1);
+    }
+
+    &.filled h3 {
+        display: block;
+    }
+
+    &.filled ul {
+        display: flex;
+    }
+
+    h3, ul {
+        display: none;
+    }
+
+    h3 {
+        color: #333;
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0;
+        text-align: center;
+    }
+
+    img {
+        position: relative;
+        width: 100%;
+        z-index: 2;
+    }
+}
+
+/* Mainhand */
+.SummonUnit.main,
+.SummonUnit.friend {
+    margin-right: 24px;
+    max-width: 200px;
+}
+
+.SummonUnit.friend {
+    margin-right: 0;
+}
+
+.SummonUnit.main .SummonImage,
+.SummonUnit.friend .SummonImage {
+    height: 374px;
+    width: 180px;
+}
+
+/* Grid */
+.SummonUnit.grid {
+    max-width: 160px;
+}
+
+.SummonUnit.grid .SummonImage {
+    list-style-type: none;
+    height: 92px;
+    width: 160px;
+}

src/components/SummonUnit/index.tsx

@@ -9,7 +9,7 @@ import mainImages from '../../images/summon-main/*.jpg'
 import gridImages from '../../images/summon-grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     onReceiveData: (summon: Summon, position: number) => void