diff --git a/app/assets/stylesheets/single-post-view.css.sass b/app/assets/stylesheets/single-post-view.css.sass
deleted file mode 100644
index 4b190bc08..000000000
--- a/app/assets/stylesheets/single-post-view.css.sass
+++ /dev/null
@@ -1,119 +0,0 @@
-#single-post-container
-  padding-top: 20px
-  padding-bottom: 3em
-
-#single-post-content
-  #head
-    color: #aaa
-    font-size: 12px
-    #author
-      .img
-        max-width: 25%
-      .avatar
-      .bd
-        padding-left: 10px
-        .retweet
-          i
-            margin: 0 3px
-    #single-post-actions
-      .buttons
-        position: relative
-        top: 6px
-        clear: right
-      .public-info > i
-        float: left
-        margin: 2px 4px 0 0
-      i.comment:hover
-        color: #424242
-      i.heart.gray:hover
-        color: #a40802
-      i.heart.red:hover
-        color: #f55f5a
-      i.retweet:hover
-        color: #3f8fba
-
-      time
-        float: right
-        margin-left: 3px
-      a
-        margin: 0 0 0 6px
-
-        &:hover
-          text-decoration: none
-
-  border-right: solid 1px #ccc
-  padding-right: 10px
-  #body
-    margin-left: 20px
-    padding-top: 20px
-    width: auto
-    .photo_attachments
-      padding-bottom: 10px
-      img
-        display: block
-        margin-left: auto
-        margin-right: auto
-        padding-bottom: 5px
-        max-width: 90%
-
-    .oembed
-      background: image-url('ajax-loader2.gif') no-repeat center center
-      float: left
-      width: 95%
-
-      .thumb
-        @include video-overlay()
-
-      iframe, .thumb img
-        width: 100%
-        min-height: 60%
-
-#single-post-interactions
-  border-left: 1px solid #ccc
-  position: relative
-  left: -1px
-  margin-left: 0
-  padding-left: 2.5%
-  #likes, #reshares, #comments-meta
-    padding-bottom: 5px
-  .comment
-    border-bottom: solid 1px #ccc
-    padding-top: 10px
-    padding-bottom: 10px
-
-    p
-      margin: 0
-  textarea
-    width: 95%
-  .new_comment_form_wrapper
-    border-bottom: none
-  a
-    color: #3f8fba
-  .timeago
-    color: #aaaaaa
-    text-decoration: none
-    font-size: smaller
-
-.comment
-  &:hover
-    .controls
-      @include opacity(0.3)
-  .controls
-    @include transition(opacity)
-    @include opacity(0)
-    :z-index 6
-    :float right
-
-    &:hover
-      @include opacity(1)
-
-    .delete
-      :display inline-block
-
-      .icons-deletelabel
-        :height 14px
-        :width 14px
-
-    a:hover
-      :text-decoration none
-
diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss
new file mode 100644
index 000000000..acf509d45
--- /dev/null
+++ b/app/assets/stylesheets/single-post-view.css.scss
@@ -0,0 +1,148 @@
+#single-post-container {
+  padding-top: 20px;
+  padding-bottom: 3em;
+}
+
+#single-post-content {
+  #head {
+    color: #aaaaaa;
+    font-size: 12px;
+    #author {
+      .img {
+        max-width: 25%;
+      }
+      .avatar {}
+      .bd {
+        padding-left: 10px;
+        .retweet {
+          i {
+            margin: 0 3px;
+          }
+        }
+      }
+    }
+    #single-post-actions {
+      .buttons {
+        position: relative;
+        top: 6px;
+        clear: right;
+      }
+      .public-info > i {
+        float: left;
+        margin: 2px 4px 0 0;
+      }
+      i.comment:hover {
+        color: #424242;
+      }
+      i.heart.gray:hover {
+        color: #a40802;
+      }
+      i.heart.red:hover {
+        color: #f55f5a;
+      }
+      i.retweet:hover {
+        color: #3f8fba;
+      }
+      time {
+        float: right;
+        margin-left: 3px;
+      }
+      a {
+        margin: 0 0 0 6px;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+  border-right: solid 1px #cccccc;
+  padding-right: 10px;
+  #body {
+    margin-left: 20px;
+    padding-top: 20px;
+    width: auto;
+    .photo_attachments {
+      padding-bottom: 10px;
+      img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        padding-bottom: 5px;
+        max-width: 90%;
+      }
+    }
+    .oembed {
+      background: image-url("ajax-loader2.gif") no-repeat center center;
+      float: left;
+      width: 95%;
+      .thumb {
+        @include video-overlay;
+      }
+      iframe, .thumb img {
+        width: 100%;
+        min-height: 60%;
+      }
+    }
+  }
+}
+
+#single-post-interactions {
+  border-left: 1px solid #cccccc;
+  position: relative;
+  left: -1px;
+  margin-left: 0;
+  padding-left: 2.5%;
+  #likes, #reshares, #comments-meta {
+    padding-bottom: 5px;
+  }
+  .comment {
+    border-bottom: solid 1px #cccccc;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    p {
+      margin: 0;
+    }
+  }
+  textarea {
+    width: 95%;
+  }
+  .new_comment_form_wrapper {
+    border-bottom: none;
+  }
+  a {
+    color: #3f8fba;
+  }
+  .timeago {
+    color: #aaaaaa;
+    text-decoration: none;
+    font-size: smaller;
+  }
+}
+
+.comment {
+  &:hover {
+    .controls {
+      @include opacity(0.3);
+    }
+  }
+  .controls {
+    @include transition(opacity);
+    @include opacity(0);
+    z-index: 6;
+    float: right;
+    &:hover {
+      @include opacity(1);
+    }
+    .delete {
+      display: inline-block;
+      .icons-deletelabel {
+        height: 14px;
+        width: 14px;
+      }
+    }
+    a:hover {
+      text-decoration: none;
+    }
+  }
+}
+