Permalink
Browse files

Add Sass (scss) support

  • Loading branch information...
1 parent 6626d04 commit edbadbe0a21803102dae4ee08ae2f37d3208c5dc @MoOx MoOx committed Feb 2, 2013
Showing with 215 additions and 2 deletions.
  1. +4 −0 code.js
  2. +35 −0 components/prism-scss.js
  3. +1 −0 components/prism-scss.min.js
  4. +134 −2 examples.html
  5. +41 −0 prism.js
View
@@ -47,6 +47,10 @@ var components = {
'coffeescript': {
title: 'CoffeeScript',
require: 'javascript'
+ },
+ 'scss': {
+ title: 'Sass (Scss)',
+ require: 'css'
}
},
plugins: {
View
@@ -0,0 +1,35 @@
+Prism.languages.scss = Prism.languages.extend('css', {
+ 'comment': {
+ pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
+ lookbehind: true
+ },
+ // aturle is just the @***, not the entire rule (to highlight var & stuffs)
+ // + add ability to highlight number & unit for media queries
+ 'atrule': /@[\w-]+(?=\s+(\(|\{|;))/gi,
+ // url, compassified
+ 'url': /([-a-z]+-)*url(?=\()/gi,
+ // CSS selector regex is not appropriate for Sass
+ // since there can be lot more things (var, @ directive, nesting..)
+ // a selector must start at the end of a property or after a brace (end of other rules or nesting)
+ // it can contain some caracters that aren't used for defining rules or end of selector, & (parent selector), or interpolated variable
+ // the end of a selector is found when there is no rules in it ( {} or {\s}) or if there is a property (because an interpolated var
+ // can "pass" as a selector- e.g: proper#{$erty})
+ // this one was ard to do, so please be careful if you edit this one :)
+ 'selector': /([^@;:\{\}\(\)]?([^@;:\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm
+});
+
+Prism.languages.insertBefore('scss', 'atrule', {
+ 'keyword': /@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return)|(?=@for\s+\$[-_\w]+\s)+from/i
+});
+
+Prism.languages.insertBefore('scss', 'property', {
+ 'variable': /\$[-_\w]+/i
+});
+
+Prism.languages.insertBefore('scss', 'ignore', {
+ 'placeholder': /%[-_\w]+/i,
+ 'statement': /\B!(default|optional)\b/gi,
+ 'boolean': /\b(true|false)\b/g,
+ 'null': /\b(null)\b/g,
+ 'operator': /\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g
+});
Oops, something went wrong.
View
@@ -303,8 +303,6 @@
<p>As you can notice String keyword is not highlighted because it's not a Java language keyword (cf. <a href="http://docs.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html">Java Language Keywords</a>). The main reason is that String is not a primitive type such as <em>int</em> but a class type like <em>Integer</em>.</p>
</section>
-
-
<section class="language-coffeescript">
<h1>Coffeescript</h1>
@@ -370,6 +368,140 @@
</code></pre>
</section>
+<section class="language-scss">
+ <h1>Sass (Scss)</h2>
+
+ <h2>Comments</h2>
+ <pre><code>// This is a simple one line comment</code></pre>
+
+ <h2>Variables</h2>
+ <pre><code>$var: value;
+$bool: true;
+$nullValue: null;
+$interpolation: -vendor-#{$var};</code></pre>
+
+ <h2>Nesting</h2>
+ <pre><code>sel {
+ ector {
+ #chi,
+ ld .ren { } inline {} * {}
+ }
+
+ &.parentSelector {
+ nested & test #{$inter}pol {}
+ }
+}</code></pre>
+
+ <h2>Directives</h2>
+ <pre><code>@import "compass";
+
+.class {
+ @extend %placeholder;
+}
+
+@debug $var;
+
+@warn "This is a Warning in the console";</code></pre>
+
+ <h2>Keywords</h2>
+ <pre><code>@mixin super-mixin() {
+ @include great-mixin();
+}
+
+@function fn() {
+ @return value;
+}
+ </code></pre>
+
+ <h2>URLs Functions (Compass Style)</h2>
+ <pre><code>selector {
+ background: image-url('stuff.png');
+}
+
+@font-face {
+ src: font-url('font.woff');
+}</code></pre>
+
+ <h2>Statements</h2>
+ <pre><code>$var: value !default;
+
+selector {
+ @extend %stuff !optional;
+}</code></pre>
+
+ <h2>Controls</h2>
+ <pre><code>@if(true) {
+ // ...
+}
+@else if {
+ // ...
+}
+@else {
+ // ...
+}
+
+@for $i from 1 through 3 {
+ // ...
+}
+
+@each $animal in puma, sea-slug, egret, salamander {
+ // ...
+}
+
+$i: 2;
+@while $i > 0 {
+ //...
+ $i: $i - 1; // note the operator
+ $i: 3 * 2 + $i % 5;
+}</code></pre>
+
+ <h2>Scss full example</h2>
+ <pre><code>@import "compass";
+
+@mixin mixin($param) {
+ @if($param==true) {
+ selector-#{$test}-stuff,
+ sel2 {
+ property: -moz-#{$param};
+ aze: rty;
+
+ child {
+ test: $param * 3;
+ a: bcd;
+ color: #f45f55;
+ }
+ }
+ }
+ @else {
+ property: $param + #aaa;
+ test: stupid;
+ }
+}
+
+$i: 2;
+@while $i > 0 {
+ sel#{$i}: $i * 2
+}
+
+selector {
+ @media (min-width: 800px) {
+ stuff: $thing;
+ }
+}</code></pre>
+
+ <p>
+ This Scss syntax can be used just for CSS too since regular CSS is valid Scss too.
+ Highlight renders better with an appropriate theme (to customize specific tokens).
+ </p>
+ <h2>Known issues</h2>
+ <ul>
+ <li>&amp; keyword and interpolated variables are not highlighted in selectors.</li>
+ <li>Some control directives parameters are parsed as selectors.</li>
+ <li>Does not work very well with indented Sass syntax. That's why it's just called "scss".</li>
+ </ul>
+ <p>If you are good with regex, maybe you can help to improve this.</p>
+</section>
+
<section id="failures" class="language-javascript">
<h1>Known failures (JavaScript)</h1>
<p>There are certain edge cases where Prism will fail.
View
@@ -501,3 +501,44 @@ Prism.languages.insertBefore('coffeescript', 'keyword', {
'attr-name': /[_?a-z-|A-Z-]+(\s*:)| @[_?$?a-z-|A-Z-]+(\s*)| /g
});
+
+/* **********************************************
+ Begin prism-scss.js
+********************************************** */
+
+Prism.languages.scss = Prism.languages.extend('css', {
+ 'comment': {
+ pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
+ lookbehind: true
+ },
+ // aturle is just the @***, not the entire rule (to highlight var & stuffs)
+ // + add ability to highlight number & unit for media queries
+ 'atrule': /@[\w-]+(?=\s+(\(|\{|;))/gi,
+ // url, compassified
+ 'url': /([-a-z]+-)*url(?=\()/gi,
+ // CSS selector regex is not appropriate for Sass
+ // since there can be lot more things (var, @ directive, nesting..)
+ // a selector must start at the end of a property or after a brace (end of other rules or nesting)
+ // it can contain some caracters that aren't used for defining rules or end of selector, & (parent selector), or interpolated variable
+ // the end of a selector is found when there is no rules in it ( {} or {\s}) or if there is a property (because an interpolated var
+ // can "pass" as a selector- e.g: proper#{$erty})
+ // this one was ard to do, so please be careful if you edit this one :)
+ 'selector': /([^@;:\{\}\(\)]?([^@;:\{\}\(\)]|&amp;|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm
+});
+
+Prism.languages.insertBefore('scss', 'atrule', {
+ 'keyword': /@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return)|(?=@for\s+\$[-_\w]+\s)+from/i
+});
+
+Prism.languages.insertBefore('scss', 'property', {
+ 'variable': /\$[-_\w]+/i
+});
+
+Prism.languages.insertBefore('scss', 'ignore', {
+ 'placeholder': /%[-_\w]+/i,
+ 'statement': /\B!(default|optional)\b/gi,
+ 'boolean': /\b(true|false)\b/g,
+ 'null': /\b(null)\b/g,
+ 'operator': /\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g
+});
+

0 comments on commit edbadbe

Please sign in to comment.