123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <!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>
|