diff --git a/.gitignore b/.gitignore
index 0720f5b..18c528a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,5 @@ bower_components
 .DS_Store
 node_modules/*
 .idea
+scss/bootstrap-markdown.css
+scss/bootstrap-markdown.css.map
diff --git a/scss/_md-editor.scss b/scss/_md-editor.scss
new file mode 100644
index 0000000..d671beb
--- /dev/null
+++ b/scss/_md-editor.scss
@@ -0,0 +1,175 @@
+//
+// md-editor
+//
+
+.md-editor {
+    display: block;
+    border: 1px solid $table-border-color;
+
+    > .md-header, .md-footer {
+        display: block;
+        padding: 6px 4px;
+        background: $panel-default-heading-bg;
+    }
+
+    > .md-header {
+        margin: 0;
+    }
+
+    > .md-preview {
+        background: $panel-bg;
+        border-top: 1px dashed $table-border-color;
+        border-bottom: 1px dashed $table-border-color;
+        min-height: 10px;
+        overflow: auto;
+    }
+
+    > textarea {
+        font-family: $font-family-monospace;
+        font-size: $font-size-base;
+        outline: 0;
+        outline: thin dotted  \9; /* IE6-9 */
+        margin: 0;
+        display: block;
+        padding: 0;
+        width: 100%;
+        border: 0;
+        border-top: 1px dashed $table-border-color;
+        border-bottom: 1px dashed $table-border-color;
+        border-radius: 0;
+        box-shadow: none;
+        background: $input-bg-disabled;
+        &:focus {
+            box-shadow: none;
+            background: $input-bg;
+        }
+    }
+
+
+    &.active {
+        border-color: $color;
+        outline: 0;
+        @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba);
+    }
+
+    .md-controls {
+        float: right;
+        padding: 3px;
+
+        .md-control {
+            right: 5px;
+            color: #bebebe;
+            padding: 3px 3px 3px 10px;
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+
+    // fullscreen mode styles
+    &.md-fullscreen-mode {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99999;
+        padding: 60px 30px 15px;
+        background: #fff !important;
+        border: 0 !important;
+
+        .md-footer {
+            display: none;
+        }
+
+        .md-input,
+        .md-preview {
+            margin: 0 auto !important;
+            height: 100% !important;
+            font-size: 20px !important;
+            padding: 20px !important;
+            color: #999;
+            line-height: 1.6em !important;
+            resize: none !important;
+            box-shadow: none !important;
+            background: #fff !important;
+            border: 0 !important;
+        }
+
+        .md-preview {
+            color: #333;
+            overflow: auto;
+        }
+
+        .md-input {
+            &:hover,
+            &:focus {
+                color: #333;
+                background: #fff !important;
+            }
+        }
+
+        .md-header {
+            background: none;
+            text-align: center;
+            position: fixed;
+            width: 100%;
+            top: 20px;
+        }
+
+        .btn-group {
+            float: none;
+        }
+
+        .btn {
+            border: 0;
+            background: none;
+            color: #b3b3b3;
+
+            &:hover,
+            &:focus,
+            &.active,
+            &:active {
+                box-shadow: none;
+                color: #333;
+            }
+        }
+
+        .md-fullscreen-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            text-align: right;
+            z-index: 1002;
+            display: block;
+            a {
+                color: #b3b3b3;
+                clear: right;
+                margin: 10px;
+                width: 30px;
+                height: 30px;
+                text-align: center;
+
+                &:hover {
+                    color: #333;
+                    text-decoration: none;
+                }
+            }
+        }
+
+        .md-editor {
+            height: 100% !important;
+            position: relative;
+        }
+    }
+
+    .md-fullscreen-controls {
+        display: none;
+    }
+}
+
+.md-nooverflow {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000..24389c7
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,16 @@
+//
+// Variables
+//
+
+$table-border-color: #ddd;
+$panel-default-heading-bg: #f5f5f5;
+$panel-bg: #fff;
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-size-base: 14px;
+$input-bg-disabled: #eeeeee;
+$input-bg: #fff;
+$input-border-focus: #66afe9;
+
+// Hover state
+$color: $input-border-focus;
+$color-rgba: rgba(red($color), green($color), blue($color), .6);
diff --git a/scss/bootstrap-markdown.scss b/scss/bootstrap-markdown.scss
index d5fb2e8..30031ae 100644
--- a/scss/bootstrap-markdown.scss
+++ b/scss/bootstrap-markdown.scss
@@ -5,185 +5,6 @@
  * @copyright 2013-2016 Taufan Aditya
  */
 
-$table-border-color: #ddd;
-$panel-default-heading-bg: #f5f5f5;
-$panel-bg: #fff;
-$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 14px;
-$input-bg-disabled: #eeeeee;
-$input-bg: #fff;
-$input-border-focus: #66afe9;
-
-.md-editor {
-  display: block;
-  border: 1px solid $table-border-color;
-
-  > .md-header, .md-footer {
-    display: block;
-    padding: 6px 4px;
-    background: $panel-default-heading-bg;
-  }
-
-  > .md-header {
-    margin: 0;
-  }
-
-  > .md-preview {
-    background: $panel-bg;
-    border-top: 1px dashed $table-border-color;
-    border-bottom: 1px dashed $table-border-color;
-    min-height: 10px;
-    overflow: auto;
-  }
-
-  > textarea {
-    font-family: $font-family-monospace;
-    font-size: $font-size-base;
-    outline: 0;
-    outline: thin dotted  \9; /* IE6-9 */
-    margin: 0;
-    display: block;
-    padding: 0;
-    width: 100%;
-    border: 0;
-    border-top: 1px dashed $table-border-color;
-    border-bottom: 1px dashed $table-border-color;
-    border-radius: 0;
-    box-shadow: none;
-    background: $input-bg-disabled;
-    &:focus {
-      box-shadow: none;
-      background: $input-bg;
-    }
-  }
-
-  // Hover state
-  $color: $input-border-focus;
-  $color-rgba: rgba(red($color), green($color), blue($color), .6);
-  &.active {
-    border-color: $color;
-    outline: 0;
-    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba);
-  }
-
-  .md-controls {
-    float: right;
-    padding: 3px;
-
-    .md-control {
-      right: 5px;
-      color: #bebebe;
-      padding: 3px 3px 3px 10px;
-      &:hover {
-        color: #333;
-      }
-    }
-  }
-
-  // fullscreen mode styles
-  &.md-fullscreen-mode {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 99999;
-    padding: 60px 30px 15px;
-    background: #fff !important;
-    border: 0 !important;
-
-    .md-footer {
-      display: none;
-    }
-
-    .md-input,
-    .md-preview {
-      margin: 0 auto !important;
-      height: 100% !important;
-      font-size: 20px !important;
-      padding: 20px !important;
-      color: #999;
-      line-height: 1.6em !important;
-      resize: none !important;
-      box-shadow: none !important;
-      background: #fff !important;
-      border: 0 !important;
-    }
-
-    .md-preview {
-      color: #333;
-      overflow: auto;
-    }
-
-    .md-input {
-      &:hover,
-      &:focus {
-        color: #333;
-        background: #fff !important;
-      }
-    }
-
-    .md-header {
-      background: none;
-      text-align: center;
-      position: fixed;
-      width: 100%;
-      top: 20px;
-    }
-
-    .btn-group {
-      float: none;
-    }
-
-    .btn {
-      border: 0;
-      background: none;
-      color: #b3b3b3;
-
-      &:hover,
-      &:focus,
-      &.active,
-      &:active {
-        box-shadow: none;
-        color: #333;
-      }
-    }
-
-    .md-fullscreen-controls {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      text-align: right;
-      z-index: 1002;
-      display: block;
-      a {
-        color: #b3b3b3;
-        clear: right;
-        margin: 10px;
-        width: 30px;
-        height: 30px;
-        text-align: center;
-
-        &:hover {
-          color: #333;
-          text-decoration: none;
-        }
-      }
-    }
-
-    .md-editor {
-      height: 100% !important;
-      position: relative;
-    }
-  }
-
-  .md-fullscreen-controls {
-    display: none;
-  }
-}
-
-.md-nooverflow {
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-}
+@import "variables";
+@import "mixins/box-shadow";
+@import "md-editor";
diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
new file mode 100644
index 0000000..1e32c08
--- /dev/null
+++ b/scss/mixins/_box-shadow.scss
@@ -0,0 +1,8 @@
+//
+// box-shadow
+//
+
+@mixin box-shadow($param1,$param2) {
+    -webkit-box-shadow: $param1,$param2; // iOS <4.3 & Android <4.1
+    box-shadow: $param1,$param2;
+}