Plugin: color previewer: Add support for Sass variables

PrismJS · Oct 5, 2015 · 3a1fb04 · 3a1fb04
1 parent 6d94e03
commit 3a1fb04
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/plugins/previewer-color/index.html b/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

diff --git a/plugins/previewer-color/prism-previewer-color.js b/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': [
 			{

diff --git a/plugins/previewer-color/prism-previewer-color.min.js b/plugins/previewer-color/prism-previewer-color.min.js