diff --git a/src/App.sass b/src/App.sass
new file mode 100644
index 0000000..831d480
--- /dev/null
+++ b/src/App.sass
@@ -0,0 +1,24 @@
+html, body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  color: #333;
+  margin: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+h1 {
+  color: purple;
+}
+
+.editor {
+  width: 800px;
+  height: 500px;
+}
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index edbbfc0..e0c8adb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -125,29 +125,4 @@
   <input type="file" on:change={handleChangeFiles}>
 </p>
 
-<style>
-	html, body {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 0;
-	}
-
-	body {
-		color: #333;
-		margin: 0;
-		padding: 8px;
-		box-sizing: border-box;
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	}
-
-	h1 {
-		color: purple;
-	}
-
-	.editor {
-		width: 800px;
-		height: 500px;
-	}
-</style>
+<style type="text/scss" src="App.sass"></style>
diff --git a/src/JSONEditor.sass b/src/JSONEditor.sass
new file mode 100644
index 0000000..3733435
--- /dev/null
+++ b/src/JSONEditor.sass
@@ -0,0 +1,31 @@
+@import './styles.scss';
+
+.jsoneditor {
+  border: 1px solid gray;
+  width: 100%;
+  height: 100%;
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+
+  .menu {
+    font-family: $font-family-menu;
+    font-size: $font-size;
+    padding: $menu-padding;
+    background: $theme-color;
+    color: $white;
+    text-align: right;
+    
+    .search-input {
+      border: none;
+      font-family: $font-family-menu;
+      font-size: $font-size;
+      padding: $input-padding;
+    }
+  }
+  
+  .contents {
+    flex: 1;
+    overflow: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte
index 19ca8da..7b60e27 100644
--- a/src/JSONEditor.svelte
+++ b/src/JSONEditor.svelte
@@ -69,36 +69,4 @@
   </div>
 </div>
 
-<style type="text/scss">
-	@import './styles.scss';
-
-	.jsoneditor {
-		border: 1px solid gray;
-		width: 100%;
-		height: 100%;
-    min-height: 150px;
-    display: flex;
-    flex-direction: column;
-
-		.menu {
-      font-family: $font-family-menu;
-      font-size: $font-size;
-			padding: $menu-padding;
-			background: $theme-color;
-      color: $white;
-      text-align: right;
-      
-      .search-input {
-        border: none;
-        font-family: $font-family-menu;
-        font-size: $font-size;
-        padding: $input-padding;
-      }
-    }
-    
-    .contents {
-      flex: 1;
-      overflow: auto;
-    }
-	}
-</style>
+<style type="text/scss" src="JSONEditor.sass"></style>
diff --git a/src/JSONNode.sass b/src/JSONNode.sass
new file mode 100644
index 0000000..72be6c0
--- /dev/null
+++ b/src/JSONNode.sass
@@ -0,0 +1,150 @@
+@import './styles.scss';
+
+.json-node {
+  font-family: $font-family;
+  font-size: $font-size;
+  color: $black;
+
+  .header {
+    position: relative;
+  }
+
+  .header,
+  .contents {
+    display: table;
+    flex-direction: row;
+
+    line-height: $line-height;
+
+    > * {
+      display: table-cell;
+    }
+  }
+
+  .contents {
+    padding-left: $line-height ; // must be the same as the width of the expand button
+    padding-right: 5px;
+  }
+
+  .footer {
+    padding-left: $line-height + $input-padding; // must be the same as the width of the expand button
+  }
+}
+
+.expand {
+  position: relative;
+  top: 2px;
+  width: $line-height;
+  height: $line-height;
+  padding: 0;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: $gray-icon;
+  font-size: $font-size-icon;
+}
+
+.key,
+.value {
+  line-height: $line-height;
+  min-width: 16px;
+  word-break: normal;
+  padding: 0 $input-padding;
+  outline: none;
+  border-radius: 1px;
+  vertical-align: top;
+
+  &:focus {
+    box-shadow: 0 0 3px 1px #008fd5;
+    z-index: 1;
+  }
+}
+
+.separator,
+.delimiter {
+  vertical-align: top;
+  color: $gray;
+}
+
+.tag {
+  vertical-align: top;
+  border: none;
+  font-size: $font-size-small;
+  font-family: $font-family-menu;
+  color: white;
+  background: $light-gray;
+  border-radius: 2px;
+  padding: 1px 4px;
+  margin: 0 5px;
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+
+  &:hover {
+    background: lighten($light-gray, 5%);
+  }
+}
+
+.items,
+.props {
+  padding-left: $indentation-width;
+}
+.value {
+
+  &.string {
+    color: #008000;
+  }
+
+  &.object,
+  &.array {
+    min-width: 16px;
+    color: $gray;
+  }
+
+  &.number {
+    color: #ee422e;
+  }
+
+  &.boolean {
+    color: #ff8c00;
+  }
+
+  &.null {
+    color: #004ED0;
+  }
+
+  &.invalid {
+    color: #000000;
+  }
+
+  &.url {
+    color: green;
+    text-decoration: underline;
+  }
+}
+
+div.empty {
+  &:not(:focus) {
+    outline: 1px dotted lightgray;
+    -moz-outline-radius: 2px;
+  }
+  
+  &::after {
+    pointer-events: none;
+    color: lightgray;
+  }
+
+  &.key::after {
+    content: 'key';
+  }
+
+  &.value::after {
+    content: 'value';
+  }
+}
+
+.key.search,
+.value.search {
+  background-color: $highlight-color;
+}
\ No newline at end of file
diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index 98a1987..ad56d2f 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -11,7 +11,6 @@
   import { compileJSONPointer } from './utils/jsonPointer'
 
   export let key = undefined // only applicable for object properties
-  export let index = undefined // only applicable for array items
   export let value
   export let searchResult
   export let onChange
@@ -298,155 +297,4 @@
   {/if}
 </div>
 
-<style type="text/scss">
-  @import './styles.scss';
-
-  .json-node {
-    font-family: $font-family;
-    font-size: $font-size;
-    color: $black;
-
-    .header {
-      position: relative;
-    }
-
-    .header,
-    .contents {
-      display: table;
-      flex-direction: row;
-
-      line-height: $line-height;
-
-      > * {
-        display: table-cell;
-      }
-    }
-
-    .contents {
-      padding-left: $line-height ; // must be the same as the width of the expand button
-      padding-right: 5px;
-    }
-
-    .footer {
-      padding-left: $line-height + $input-padding; // must be the same as the width of the expand button
-    }
-  }
-
-  .expand {
-    position: relative;
-    top: 2px;
-    width: $line-height;
-    height: $line-height;
-    padding: 0;
-    margin: 0;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    color: $gray-icon;
-    font-size: $font-size-icon;
-  }
-
-  .key,
-  .value {
-    line-height: $line-height;
-    min-width: 16px;
-    word-break: normal;
-    padding: 0 $input-padding;
-    outline: none;
-    border-radius: 1px;
-    vertical-align: top;
-
-    &:focus {
-      box-shadow: 0 0 3px 1px #008fd5;
-      z-index: 1;
-    }
-  }
-
-  .separator,
-  .delimiter {
-    vertical-align: top;
-    color: $gray;
-  }
-
-  .tag {
-    vertical-align: top;
-    border: none;
-    font-size: $font-size-small;
-    font-family: $font-family-menu;
-    color: white;
-    background: $light-gray;
-    border-radius: 2px;
-    padding: 1px 4px;
-    margin: 0 5px;
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-
-    &:hover {
-      background: lighten($light-gray, 5%);
-    }
-  }
-
-  .items,
-  .props {
-    padding-left: $indentation-width;
-  }
-  .value {
-
-    &.string {
-      color: #008000;
-    }
-
-    &.object,
-    &.array {
-      min-width: 16px;
-      color: $gray;
-    }
-
-    &.number {
-      color: #ee422e;
-    }
-
-    &.boolean {
-      color: #ff8c00;
-    }
-
-    &.null {
-      color: #004ED0;
-    }
-
-    &.invalid {
-      color: #000000;
-    }
-
-    &.url {
-      color: green;
-      text-decoration: underline;
-    }
-  }
-
-  div.empty {
-    &:not(:focus) {
-      outline: 1px dotted lightgray;
-      -moz-outline-radius: 2px;
-    }
-    
-    &::after {
-      pointer-events: none;
-      color: lightgray;
-    }
-
-    &.key::after {
-      content: 'key';
-    }
-
-    &.value::after {
-      content: 'value';
-    }
-  }
-
-  .key.search,
-  .value.search {
-    background-color: $highlight-color;
-  }
-</style>
+<style type="text/scss" src="JSONNode.sass"></style>