CodeMirror: SCSS mode

SCSS mode

/* 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;
}

The SCSS mode is a sub-mode of the CSS mode (defined in css.js).

Parsing/Highlighting Tests: normal, verbose.