Basic Sass support (fix #199)

components.js

@@ -276,6 +276,10 @@ var components = {
 			"title": "SAS",
 			"owner": "Golmote"
 		},
+		"sass": {
+			"title": "Sass (Sass)",
+			"owner": "Golmote"
+		},
 		"scss": {
 			"title": "Sass (Scss)",
 			"require": "css",

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));

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>