CodeMirror: SCSS mode

<br /> /* Some example SCSS */</p> <p>@import “compass/css3”;<br /> $variable: #333;</p> <p>$blue: #3bbfce;<br /> $margin: 16px;</p> <p>.content-navigation {<br /> #nested {<br /> background-color: black;<br /> }<br /> border-color: $blue;<br /> color:<br /> darken($blue, 9%);<br /> }</p> <p>.border {<br /> padding: $margin / 2;<br /> margin: $margin / 2;<br /> border-color: $blue;<br /> }</p> <p>@mixin table-base {<br /> th {<br /> text-align: center;<br /> font-weight: bold;<br /> }<br /> td, th {padding: 2px}<br /> }</p> <p>table.hl {<br /> margin: 2em 0;<br /> td.ln {<br /> text-align: right;<br /> }<br /> }</p> <p>li {<br /> font: {<br /> family: serif;<br /> weight: bold;<br /> size: 1.2em;<br /> }<br /> }</p> <p>@mixin left($dist) {<br /> float: left;<br /> margin-left: $dist;<br /> }</p> <p>#data {<br /> @include left(10px);<br /> @include table-base;<br /> }</p> <p>.source {<br /> @include flow-into(target);<br /> border: 10px solid green;<br /> margin: 20px;<br /> width: 200px; }</p> <p>.new-container {<br /> @include flow-from(target);<br /> border: 10px solid red;<br /> margin: 20px;<br /> width: 200px; }</p> <p>body {<br /> margin: 0;<br /> padding: 3em 6em;<br /> font-family: tahoma, arial, sans-serif;<br /> color: #000;<br /> }</p> <p>@mixin yellow() {<br /> background: yellow;<br /> }</p> <p>.big {<br /> font-size: 14px;<br /> }</p> <p>.nested {<br /> @include border-radius(3px);<br /> @extend .big;<br /> p {<br /> background: whitesmoke;<br /> a {<br /> color: red;<br /> }<br /> }<br /> }</p> <p>#navigation a {<br /> font-weight: bold;<br /> text-decoration: none !important;<br /> }</p> <p>h1 {<br /> font-size: 2.5em;<br /> }</p> <p>h2 {<br /> font-size: 1.7em;<br /> }</p> <p>h1:before, h2:before {<br /> content: “::”;<br /> }</p> <p>code {<br /> font-family: courier, monospace;<br /> font-size: 80%;<br /> color: #418A8A;<br /> }<br />

MIME types defined: text/scss.

Parsing/Highlighting Tests: normal, verbose.