--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CodeMirror: SCSS mode</title>
+ <link rel="stylesheet" href="../../lib/codemirror.css">
+ <script src="../../lib/codemirror.js"></script>
+ <script src="css.js"></script>
+ <style>.CodeMirror {background: #f8f8f8;}</style>
+ <link rel="stylesheet" href="../../doc/docs.css">
+ </head>
+ <body>
+ <h1>CodeMirror: SCSS mode</h1>
+ <form><textarea id="code" name="code">
+/* Some example SCSS */
+
+@import "compass/css3";
+$variable: #333;
+
+$blue: #3bbfce;
+$margin: 16px;
+
+.content-navigation {
+ #nested {
+ background-color: black;
+ }
+ border-color: $blue;
+ color:
+ darken($blue, 9%);
+}
+
+.border {
+ padding: $margin / 2;
+ margin: $margin / 2;
+ border-color: $blue;
+}
+
+@mixin table-base {
+ th {
+ text-align: center;
+ font-weight: bold;
+ }
+ td, th {padding: 2px}
+}
+
+table.hl {
+ margin: 2em 0;
+ td.ln {
+ text-align: right;
+ }
+}
+
+li {
+ font: {
+ family: serif;
+ weight: bold;
+ size: 1.2em;
+ }
+}
+
+@mixin left($dist) {
+ float: left;
+ margin-left: $dist;
+}
+
+#data {
+ @include left(10px);
+ @include table-base;
+}
+
+.source {
+ @include flow-into(target);
+ border: 10px solid green;
+ margin: 20px;
+ width: 200px; }
+
+.new-container {
+ @include flow-from(target);
+ border: 10px solid red;
+ margin: 20px;
+ width: 200px; }
+
+body {
+ margin: 0;
+ padding: 3em 6em;
+ font-family: tahoma, arial, sans-serif;
+ color: #000;
+}
+
+@mixin yellow() {
+ background: yellow;
+}
+
+.big {
+ font-size: 14px;
+}
+
+.nested {
+ @include border-radius(3px);
+ @extend .big;
+ p {
+ background: whitesmoke;
+ a {
+ color: red;
+ }
+ }
+}
+
+#navigation a {
+ font-weight: bold;
+ text-decoration: none !important;
+}
+
+h1 {
+ font-size: 2.5em;
+}
+
+h2 {
+ font-size: 1.7em;
+}
+
+h1:before, h2:before {
+ content: "::";
+}
+
+code {
+ font-family: courier, monospace;
+ font-size: 80%;
+ color: #418A8A;
+}
+</textarea></form>
+ <script>
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+ lineNumbers: true,
+ matchBrackets: true,
+ mode: "text/x-scss"
+ });
+ </script>
+
+ <p><strong>MIME types defined:</strong> <code>text/scss</code>.</p>
+
+ <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>, <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
+
+ </body>
+</html>