Basic Sass support (fix #199)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
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