Plugin: easing previewer: Add variable examples + add support for Sas…

…s variables
PrismJS · Oct 5, 2015 · 7c7ab4e · 7c7ab4e
1 parent 3a1fb04
commit 7c7ab4e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/plugins/previewer-easing/index.html b/plugins/previewer-easing/index.html
@@ -40,23 +40,27 @@ <h2>CSS</h2>
 }</code></pre>
 
 	<h2>Less</h2>
-	<pre class="language-less"><code>#header a {
+	<pre class="language-less"><code>@easing: cubic-bezier(0.1,0.3,1,.4);
+#header a {
 	transition-timing-function: ease;
 }</code></pre>
 
 	<h2>Sass</h2>
-	<pre class="language-sass"><code>.foo
+	<pre class="language-sass"><code>$easing: ease-out
+.foo
 	transition: color 0.3s ease-in-out
 </code></pre>
 
 	<h2>Scss</h2>
-	<pre class="language-scss"><code>$attr: background;
+	<pre class="language-scss"><code>$easing: linear;
+$attr: background;
 .foo {
     transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
 }</code></pre>
 
 	<h2>Stylus</h2>
-	<pre class="language-stylus"><code>.foo
+	<pre class="language-stylus"><code>easing = ease-in
+.foo
 	transition: color 0.3s ease-out
 </code></pre>
 

diff --git a/plugins/previewer-easing/prism-previewer-easing.js b/plugins/previewer-easing/prism-previewer-easing.js
@@ -10,11 +10,19 @@
 	var languages = {
 		'css': true,
 		'less': true,
-		'sass': {
-			lang: 'sass',
-			inside: 'inside',
-			root: Prism.languages.sass && Prism.languages.sass['property-line']
-		},
+		'sass': [
+			{
+				lang: 'sass',
+				inside: 'inside',
+				before: 'punctuation',
+				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': [
 			{
@@ -100,8 +108,8 @@
 					'</marker>' +
 				'</defs>' +
 				'<path d="M0,100 C20,50, 40,30, 100,0" />' +
-				'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(' + location.href + '#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
-				'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(' + location.href + '#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
+				'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(' + location.href + '#prism-previewer-easing-marker)" marker-end="url(' + location.href + '#prism-previewer-easing-marker)" />' +
+				'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(' + location.href + '#prism-previewer-easing-marker)" marker-end="url(' + location.href + '#prism-previewer-easing-marker)" />' +
 			'</svg>';
 		});
 	}

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