to-be-integrated/third-party/codemirror-3.15/mode/css/scss.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: SCSS mode</title>
   6     <link rel="stylesheet" href="../../lib/codemirror.css">
   7     <script src="../../lib/codemirror.js"></script>
   8     <script src="css.js"></script>
   9     <style>.CodeMirror {background: #f8f8f8;}</style>
  10     <link rel="stylesheet" href="../../doc/docs.css">
  11   </head>
  12   <body>
  13     <h1>CodeMirror: SCSS mode</h1>
  14     <form><textarea id="code" name="code">
  15 /* Some example SCSS */
  16
  17 @import "compass/css3";
  18 $variable: #333;
  19
  20 $blue: #3bbfce;
  21 $margin: 16px;
  22
  23 .content-navigation {
  24   #nested {
  25     background-color: black;
  26   }
  27   border-color: $blue;
  28   color:
  29     darken($blue, 9%);
  30 }
  31
  32 .border {
  33   padding: $margin / 2;
  34   margin: $margin / 2;
  35   border-color: $blue;
  36 }
  37
  38 @mixin table-base {
  39   th {
  40     text-align: center;
  41     font-weight: bold;
  42   }
  43   td, th {padding: 2px}
  44 }
  45
  46 table.hl {
  47   margin: 2em 0;
  48   td.ln {
  49     text-align: right;
  50   }
  51 }
  52
  53 li {
  54   font: {
  55     family: serif;
  56     weight: bold;
  57     size: 1.2em;
  58   }
  59 }
  60
  61 @mixin left($dist) {
  62   float: left;
  63   margin-left: $dist;
  64 }
  65
  66 #data {
  67   @include left(10px);
  68   @include table-base;
  69 }
  70
  71 .source {
  72   @include flow-into(target);
  73   border: 10px solid green;
  74   margin: 20px;
  75   width: 200px; }
  76
  77 .new-container {
  78   @include flow-from(target);
  79   border: 10px solid red;
  80   margin: 20px;
  81   width: 200px; }
  82
  83 body {
  84   margin: 0;
  85   padding: 3em 6em;
  86   font-family: tahoma, arial, sans-serif;
  87   color: #000;
  88 }
  89
  90 @mixin yellow() {
  91   background: yellow;
  92 }
  93
  94 .big {
  95   font-size: 14px;
  96 }
  97
  98 .nested {
  99   @include border-radius(3px);
 100   @extend .big;
 101   p {
 102     background: whitesmoke;
 103     a {
 104       color: red;
 105     }
 106   }
 107 }
 108
 109 #navigation a {
 110   font-weight: bold;
 111   text-decoration: none !important;
 112 }
 113
 114 h1 {
 115   font-size: 2.5em;
 116 }
 117
 118 h2 {
 119   font-size: 1.7em;
 120 }
 121
 122 h1:before, h2:before {
 123   content: "::";
 124 }
 125
 126 code {
 127   font-family: courier, monospace;
 128   font-size: 80%;
 129   color: #418A8A;
 130 }
 131 </textarea></form>
 132     <script>
 133       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 134         lineNumbers: true,
 135         matchBrackets: true,
 136         mode: "text/x-scss"
 137       });
 138     </script>
 139
 140     <p><strong>MIME types defined:</strong> <code>text/scss</code>.</p>
 141
 142     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>,  <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
 143
 144   </body>
 145 </html>