Add SASS/SCSS support

Using `node-sass`.
Closes #3

README.md

@@ -39,7 +39,7 @@ Or Settings/Preferences ➔ Packages ➔ Search for `preview`
 - [x] [EmberScript](https://github.com/Glavin001/atom-preview/issues/39)
 - [x] [ng-classify](https://github.com/Glavin001/atom-preview/issues/60)
 - [x] [LiveScript](https://github.com/Glavin001/atom-preview/issues/89)
-- [ ] [SASS](https://github.com/Glavin001/atom-preview/issues/3)
+- [x] [SASS/SCSS](https://github.com/Glavin001/atom-preview/issues/3)
 - [ ] [Markdown](https://github.com/Glavin001/atom-preview/issues/7)
 - [ ] [Haml](https://github.com/Glavin001/atom-preview/issues/9)
 - [ ] [ClojureScript](https://github.com/Glavin001/atom-preview/issues/15)

lib/renderer.coffee

@@ -284,3 +284,20 @@ module.exports =
           return cb null, e.message
       exts: /\.(yaml)$/i
       lang: -> 'json'
+    'SASS/SCSS':
+      render: (text, filepath, cb) ->
+        sass = require('node-sass')
+        sass.render(
+          {
+            file: filepath,
+            data: text,
+            outputStyle: 'expanded'
+          },
+          (error, result) ->
+            if error
+              cb null, error.message
+            else
+              cb null, String result.css
+        )
+      exts: /\.s[ac]ss$/i
+      lang: -> 'css'

package.json

@@ -56,6 +56,7 @@
     "livescript": "^1.4.0",
     "loophole": "^1.0.0",
     "ng-classify": "^4.0.2",
+    "node-sass": "^4.9.3",
     "node-uuid": "^1.4.7",
     "pug": "^2.0.0-alpha6",
     "stylus": "^0.54.2",

spec/samples/example.scss

@@ -0,0 +1,19 @@
+@mixin box($color:black) {
+  color: $color;
+
+  .box {
+    @content;
+  }
+}
+
+#container {
+  background-color: white;
+
+  @include box(#E0FF00) {
+    text-align: center;
+  };
+
+  .theme--dark & {
+    background-color: black;
+  }
+}