Skip to content
This repository
Browse code

Add Sass (scss) support

  • Loading branch information...
commit edbadbe0a21803102dae4ee08ae2f37d3208c5dc 1 parent 6626d04
Maxime Thirouin authored February 02, 2013
4  code.js
@@ -47,6 +47,10 @@ var components = {
47 47
 		'coffeescript': {
48 48
 			title: 'CoffeeScript',
49 49
 			require: 'javascript'
  50
+		},
  51
+		'scss': {
  52
+			title: 'Sass (Scss)',
  53
+			require: 'css'
50 54
 		}
51 55
 	},
52 56
 	plugins: {
35  components/prism-scss.js
... ...
@@ -0,0 +1,35 @@
  1
+Prism.languages.scss = Prism.languages.extend('css', {
  2
+	'comment': {
  3
+		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
  4
+		lookbehind: true
  5
+	},
  6
+	// aturle is just the @***, not the entire rule (to highlight var & stuffs)
  7
+	// + add ability to highlight number & unit for media queries
  8
+	'atrule': /@[\w-]+(?=\s+(\(|\{|;))/gi,
  9
+	// url, compassified
  10
+	'url': /([-a-z]+-)*url(?=\()/gi,
  11
+	// CSS selector regex is not appropriate for Sass
  12
+	// since there can be lot more things (var, @ directive, nesting..)
  13
+	// a selector must start at the end of a property or after a brace (end of other rules or nesting)
  14
+	// it can contain some caracters that aren't used for defining rules or end of selector, & (parent selector), or interpolated variable
  15
+	// 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
  16
+	// can "pass" as a selector- e.g: proper#{$erty})
  17
+	// this one was ard to do, so please be careful if you edit this one :)
  18
+	'selector': /([^@;:\{\}\(\)]?([^@;:\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm
  19
+});
  20
+
  21
+Prism.languages.insertBefore('scss', 'atrule', {
  22
+	'keyword': /@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return)|(?=@for\s+\$[-_\w]+\s)+from/i
  23
+});
  24
+
  25
+Prism.languages.insertBefore('scss', 'property', {
  26
+	'variable': /\$[-_\w]+/i
  27
+});
  28
+
  29
+Prism.languages.insertBefore('scss', 'ignore', {
  30
+	'placeholder': /%[-_\w]+/i,
  31
+	'statement': /\B!(default|optional)\b/gi,
  32
+	'boolean': /\b(true|false)\b/g,
  33
+	'null': /\b(null)\b/g,
  34
+	'operator': /\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g
  35
+});
1  components/prism-scss.min.js
... ...
@@ -0,0 +1 @@
  1
+Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/([^\.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|%|\^|(<){2}|($gt;){2,3}|:|~)/g,lookbehind:!0}});Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,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});
136  examples.html
@@ -303,8 +303,6 @@
303 303
 	<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>
304 304
 </section>
305 305
 
306  
-
307  
-
308 306
 <section class="language-coffeescript">
309 307
 	<h1>Coffeescript</h1>
310 308
 
@@ -370,6 +368,140 @@
370 368
 	</code></pre>
371 369
 </section>
372 370
 
  371
+<section class="language-scss">
  372
+	<h1>Sass (Scss)</h2>
  373
+
  374
+	<h2>Comments</h2>
  375
+	<pre><code>// This is a simple one line comment</code></pre>
  376
+
  377
+	<h2>Variables</h2>
  378
+	<pre><code>$var: value;
  379
+$bool: true;
  380
+$nullValue: null;
  381
+$interpolation: -vendor-#{$var};</code></pre>
  382
+
  383
+	<h2>Nesting</h2>
  384
+	<pre><code>sel {
  385
+	ector {
  386
+		#chi,
  387
+		ld .ren { } inline {} * {}
  388
+	}
  389
+	
  390
+	&.parentSelector {
  391
+		nested & test #{$inter}pol {}
  392
+	}
  393
+}</code></pre>
  394
+
  395
+	<h2>Directives</h2>
  396
+	<pre><code>@import "compass";
  397
+
  398
+.class {
  399
+	@extend %placeholder;
  400
+}
  401
+
  402
+@debug $var;
  403
+
  404
+@warn "This is a Warning in the console";</code></pre>
  405
+
  406
+	<h2>Keywords</h2>
  407
+	<pre><code>@mixin super-mixin() {
  408
+	@include great-mixin();
  409
+}
  410
+
  411
+@function fn() {
  412
+	@return value;
  413
+}
  414
+	</code></pre>
  415
+
  416
+	<h2>URLs Functions (Compass Style)</h2>
  417
+	<pre><code>selector {
  418
+	background: image-url('stuff.png');
  419
+}
  420
+
  421
+@font-face {
  422
+	src: font-url('font.woff');
  423
+}</code></pre>
  424
+
  425
+	<h2>Statements</h2>
  426
+	<pre><code>$var: value !default;
  427
+
  428
+selector {
  429
+	@extend %stuff !optional;
  430
+}</code></pre>
  431
+
  432
+	<h2>Controls</h2>
  433
+	<pre><code>@if(true) {
  434
+	// ...
  435
+}
  436
+@else if {
  437
+	// ...
  438
+}
  439
+@else {
  440
+	// ...
  441
+}
  442
+
  443
+@for $i from 1 through 3 {
  444
+	// ...
  445
+}
  446
+
  447
+@each $animal in puma, sea-slug, egret, salamander {
  448
+	// ...
  449
+}
  450
+
  451
+$i: 2;
  452
+@while $i > 0 {
  453
+  //...
  454
+  $i: $i - 1; // note the operator
  455
+  $i: 3 * 2 + $i % 5;
  456
+}</code></pre>
  457
+
  458
+	<h2>Scss full example</h2>
  459
+	<pre><code>@import "compass";
  460
+	
  461
+@mixin mixin($param) {
  462
+	@if($param==true) {
  463
+		selector-#{$test}-stuff,
  464
+		sel2 {
  465
+			property: -moz-#{$param};
  466
+			aze: rty;
  467
+			
  468
+			child {
  469
+				test: $param * 3;
  470
+				a: bcd;
  471
+				color: #f45f55;
  472
+			}
  473
+		}
  474
+	}
  475
+	@else {
  476
+		property: $param + #aaa;
  477
+		test: stupid;
  478
+	}
  479
+}
  480
+
  481
+$i: 2;
  482
+@while $i > 0 {
  483
+	sel#{$i}: $i * 2
  484
+}
  485
+
  486
+selector {
  487
+	@media (min-width: 800px) {
  488
+		stuff: $thing;
  489
+	}
  490
+}</code></pre>
  491
+
  492
+	<p>
  493
+		This Scss syntax can be used just for CSS too since regular CSS is valid Scss too.
  494
+		Highlight renders better with an appropriate theme (to customize specific tokens).
  495
+	</p>
  496
+	<h2>Known issues</h2>
  497
+	<ul>
  498
+		<li>&amp; keyword and interpolated variables are not highlighted in selectors.</li>
  499
+		<li>Some control directives parameters are parsed as selectors.</li>
  500
+		<li>Does not work very well with indented Sass syntax. That's why it's just called "scss".</li>
  501
+	</ul>
  502
+	<p>If you are good with regex, maybe you can help to improve this.</p>
  503
+</section>
  504
+
373 505
 <section id="failures" class="language-javascript">
374 506
 	<h1>Known failures (JavaScript)</h1>
375 507
 	<p>There are certain edge cases where Prism will fail.
41  prism.js
@@ -501,3 +501,44 @@ Prism.languages.insertBefore('coffeescript', 'keyword', {
501 501
 
502 502
   'attr-name': /[_?a-z-|A-Z-]+(\s*:)| @[_?$?a-z-|A-Z-]+(\s*)| /g
503 503
 });
  504
+
  505
+/* **********************************************
  506
+     Begin prism-scss.js
  507
+********************************************** */
  508
+
  509
+Prism.languages.scss = Prism.languages.extend('css', {
  510
+	'comment': {
  511
+		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
  512
+		lookbehind: true
  513
+	},
  514
+	// aturle is just the @***, not the entire rule (to highlight var & stuffs)
  515
+	// + add ability to highlight number & unit for media queries
  516
+	'atrule': /@[\w-]+(?=\s+(\(|\{|;))/gi,
  517
+	// url, compassified
  518
+	'url': /([-a-z]+-)*url(?=\()/gi,
  519
+	// CSS selector regex is not appropriate for Sass
  520
+	// since there can be lot more things (var, @ directive, nesting..)
  521
+	// a selector must start at the end of a property or after a brace (end of other rules or nesting)
  522
+	// it can contain some caracters that aren't used for defining rules or end of selector, & (parent selector), or interpolated variable
  523
+	// 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
  524
+	// can "pass" as a selector- e.g: proper#{$erty})
  525
+	// this one was ard to do, so please be careful if you edit this one :)
  526
+	'selector': /([^@;:\{\}\(\)]?([^@;:\{\}\(\)]|&amp;|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm
  527
+});
  528
+
  529
+Prism.languages.insertBefore('scss', 'atrule', {
  530
+	'keyword': /@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return)|(?=@for\s+\$[-_\w]+\s)+from/i
  531
+});
  532
+
  533
+Prism.languages.insertBefore('scss', 'property', {
  534
+	'variable': /\$[-_\w]+/i
  535
+});
  536
+
  537
+Prism.languages.insertBefore('scss', 'ignore', {
  538
+	'placeholder': /%[-_\w]+/i,
  539
+	'statement': /\B!(default|optional)\b/gi,
  540
+	'boolean': /\b(true|false)\b/g,
  541
+	'null': /\b(null)\b/g,
  542
+	'operator': /\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g
  543
+});
  544
+

0 notes on commit edbadbe

Please sign in to comment.
Something went wrong with that request. Please try again.