Mercurial
comparison .cms/lib/codemirror/mode/css/scss.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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> |