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