Commit b081804639aed4f2e63ccd7a4130ac3f762ba1bd

Golmote 2015-06-13T11:03:08

Basic Sass support (fix #199)

diff --git a/components.js b/components.js
index 7be1869..7523fae 100644
--- a/components.js
+++ b/components.js
@@ -276,6 +276,10 @@ var components = {
 			"title": "SAS",
 			"owner": "Golmote"
 		},
+		"sass": {
+			"title": "Sass (Sass)",
+			"owner": "Golmote"
+		},
 		"scss": {
 			"title": "Sass (Scss)",
 			"require": "css",
diff --git a/components/prism-sass.js b/components/prism-sass.js
new file mode 100644
index 0000000..9115684
--- /dev/null
+++ b/components/prism-sass.js
@@ -0,0 +1,66 @@
+(function(Prism) {
+	Prism.languages.sass = Prism.languages.extend('css', {
+		// Sass comments don't need to be closed, only indented
+		'comment': /^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m
+	});
+
+	Prism.languages.insertBefore('sass', 'atrule', {
+		// We want to consume the whole line
+		'atrule-line': {
+			// Includes support for = and + shortcuts
+			pattern: /^(?:[ \t]*)[@+=].+/m,
+			inside: {
+				'atrule': /^(?:[ \t]*)(?:@[\w-]+|[+=])/m
+			}
+		}
+	});
+	delete Prism.languages.sass.atrule;
+
+
+	var variable = /((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i;
+	var operator = /[-+]{1,2}|==?|!=|\|?\||\?|\*|\/|%/;
+
+	Prism.languages.insertBefore('sass', 'property', {
+		// We want to consume the whole line
+		'variable-line': {
+			pattern: /(^|(?:\r?\n|\r))[ \t]*\$.+/,
+			lookbehind: true,
+			inside: {
+				'punctuation': /:/,
+				'variable': variable,
+				'operator': operator
+			}
+		},
+		// We want to consume the whole line
+		'property-line': {
+			pattern: /(^|(?:\r?\n|\r))[ \t]*(?:[^:\s]+[ ]*:.*|:[^:\s]+.*)/i,
+			lookbehind: true,
+			inside: {
+				'property': [
+					/[^:\s]+(?=\s*:)/,
+					{
+						pattern: /(:)[^:\s]+/,
+						lookbehind: true
+					}
+				],
+				'punctuation': /:/,
+				'variable': variable,
+				'operator': operator,
+				'important': Prism.languages.sass.important
+			}
+		}
+	});
+	delete Prism.languages.sass.property;
+	delete Prism.languages.sass.important;
+
+	// Now that whole lines for other patterns are consumed,
+	// what's left should be selectors
+	delete Prism.languages.sass.selector;
+	Prism.languages.insertBefore('sass', 'punctuation', {
+		'selector': {
+			pattern: /([ \t]*).+(?:,(?:\r?\n|\r)\1[ \t]+.+)*/,
+			lookbehind: true
+		}
+	});
+
+}(Prism));
\ No newline at end of file
diff --git a/components/prism-sass.min.js b/components/prism-sass.min.js
new file mode 100644
index 0000000..8b4ea94
--- /dev/null
+++ b/components/prism-sass.min.js
@@ -0,0 +1 @@
+!function(e){e.languages.sass=e.languages.extend("css",{comment:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/^(?:[ \t]*)(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var a=/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i,s=/[-+]{1,2}|==?|!=|\|?\||\?|\*|\/|%/;e.languages.insertBefore("sass","property",{"variable-line":{pattern:/(^|(?:\r?\n|\r))[ \t]*\$.+/,lookbehind:!0,inside:{punctuation:/:/,variable:a,operator:s}},"property-line":{pattern:/(^|(?:\r?\n|\r))[ \t]*(?:[^:\s]+[ ]*:.*|:[^:\s]+.*)/i,lookbehind:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:a,operator:s,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,delete e.languages.sass.selector,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*).+(?:,(?:\r?\n|\r)\1[ \t]+.+)*/,lookbehind:!0}})}(Prism);
\ No newline at end of file
diff --git a/examples/prism-sass.html b/examples/prism-sass.html
new file mode 100644
index 0000000..68a7763
--- /dev/null
+++ b/examples/prism-sass.html
@@ -0,0 +1,50 @@
+<h1>Sass (Sass)</h1>
+<p>To use this language, use the class "language-sass".</p>
+
+<h2>Comments</h2>
+<pre><code>/* This comment will appear in the CSS output.
+  This is nested beneath the comment,
+  so it's part of it
+
+// This comment will not appear in the CSS output.
+  This is nested beneath the comment as well,
+  so it also won't appear</code></pre>
+
+<h2>At-rules and shortcuts</h2>
+<pre><code>@mixin large-text
+  color: #ff0000
+
+@media (min-width: 600px)
+  h1
+    @include large-text
+
+=large-text
+  color: #ff0000
+
+h1
+  +large-text</code></pre>
+
+<h2>Variables</h2>
+<pre><code>$width: 5em
+#main
+  width: $width
+</code></pre>
+
+<h2>Known failures</h2>
+<p>There are certain edge cases where Prism will fail.
+    There are always such cases in every regex-based syntax highlighter.
+    However, Prism dares to be open and honest about them.
+    If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
+</p>
+
+<h3>Deprecated Sass syntax is not supported</h3>
+<pre><code>.page
+  color = 5px + 9px
+
+!width = 13px
+.icon
+  width = !width</code></pre>
+
+<h3>Selectors with pseudo classes are highlighted as property/value pairs</h3>
+<pre><code>a:hover
+  text-decoration: underline</code></pre>
\ No newline at end of file