You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!doctype html>
<title>CodeMirror: SCSS mode</title><meta charset="utf-8"/><link rel=stylesheet href="../../doc/docs.css">
<link rel="stylesheet" href="../../lib/codemirror.css"><script src="../../lib/codemirror.js"></script><script src="../../addon/edit/matchbrackets.js"></script><script src="css.js"></script><style>.CodeMirror {background: #f8f8f8;}</style><div id=nav> <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
<ul> <li><a href="../../index.html">Home</a> <li><a href="../../doc/manual.html">Manual</a> <li><a href="https://github.com/codemirror/codemirror5">Code</a> </ul> <ul> <li><a href="../index.html">Language modes</a> <li><a class=active href="#">SCSS</a> </ul></div>
<article><h2>SCSS mode</h2><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>The SCSS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</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>
</article>
|
