Plugin: color previewer: Add support for Sass variables

Author: Golmote

plugins/previewer-color/index.html

@@ -52,7 +52,8 @@ <h2>Less</h2>
 }</code></pre>
 
 	<h2>Sass</h2>
-	<pre class="language-sass"><code>@mixin foobar
+	<pre class="language-sass"><code>$color: blue
+@mixin foobar
     color: rgba(147, 32, 34, 0.8)
 .foo
     color: pink

plugins/previewer-color/prism-previewer-color.js

@@ -16,11 +16,19 @@
 			inside: 'inside',
 			root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
 		},
-		'sass': {
-			lang: 'sass',
-			inside: 'inside',
-			root: Prism.languages.sass && Prism.languages.sass['property-line']
-		},
+		'sass': [
+			{
+				lang: 'sass',
+				before: 'punctuation',
+				inside: 'inside',
+				root: Prism.languages.sass && Prism.languages.sass['variable-line']
+			},
+			{
+				lang: 'sass',
+				inside: 'inside',
+				root: Prism.languages.sass && Prism.languages.sass['property-line']
+			}
+		],
 		'scss': true,
 		'stylus': [
 			{