scss.html
145 lines
| 2.3 KiB
| text/html
|
HtmlLexer
| r4026 | <!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> | ||||
