3 <title>CodeMirror: LESS mode
</title>
4 <meta charset=
"utf-8"/>
5 <link rel=stylesheet
href=
"../../doc/docs.css">
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 {border:
1px solid #ddd; line-height:
1.2;}
</style>
13 <a href=
"http://codemirror.net"><img id=logo
src=
"../../doc/logo.png"></a>
16 <li><a href=
"../../index.html">Home
</a>
17 <li><a href=
"../../doc/manual.html">Manual
</a>
18 <li><a href=
"https://github.com/marijnh/codemirror">Code
</a>
21 <li><a href=
"../index.html">Language modes
</a>
22 <li><a class=active
href=
"#">LESS
</a>
28 <form><textarea id=
"code" name=
"code">@media screen and (device-aspect-ratio:
16/
9) { … }
29 @media screen and (device-aspect-ratio:
1280/
720) { … }
30 @media screen and (device-aspect-ratio:
2560/
1440) { … }
34 tr:nth-child(
2n+
1) /* represents every odd row of an HTML table */
36 img:nth-of-type(
2n+
1) { float: right; }
37 img:nth-of-type(
2n) { float: left; }
39 body
> h2:not(:first-of-type):not(:last-of-type)
41 html|*:not(:link):not(:visited)
43 p::first-line { text-transform: uppercase }
45 @namespace foo url(http://www.example.com);
46 foo|h1 { color: blue } /* first rule */
48 span[
hello=
"Ocean"][
goodbye=
"Land"]
54 input[
type=
"search"]::-webkit-search-decoration,
55 input[
type=
"search"]::-webkit-search-cancel-button {
56 -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari
5
58 button::-moz-focus-inner,
59 input::-moz-focus-inner { // Inner padding and border oddities in FF3/
4
64 // reset here as of
2.0.3 due to Recess property order
66 border-color: rgba(
0,
0,
0,
.1) rgba(
0,
0,
0,
.1) rgba(
0,
0,
0,
.25);
68 fieldset span button, fieldset span input[
type=
"file"] {
70 font-family:Arial, Helvetica, sans-serif;
73 .rounded-corners (@radius:
5px) {
74 border-radius: @radius;
75 -webkit-border-radius: @radius;
76 -moz-border-radius: @radius;
79 @import url(
"something.css");
81 @light-blue: hsl(
190,
50%,
65%);
89 background-color: @blue;
91 border-top:
2px solid lighten(@alpha-blue,
20%);
92 border-bottom:
2px solid darken(@alpha-blue,
25%);
93 .box-shadow(
0,
1px,
8px,
0.6);
94 -moz-box-shadow:
0 0 0 #
000; // Because firefox sucks.
97 background-color: hsla(
210,
60%,
40%,
0.4);
100 background-color: @blue;
109 border-top:
2px solid @medium;
111 border:
2px solid darken(@medium,
25%);
112 border-left-color: darken(@medium,
15%);
113 border-right-color: darken(@medium,
15%);
115 background-color: darken(@medium,
10%);
128 text-decoration: none;
131 background-color: darken(@medium,
15%);
132 text-decoration: none;
136 .border-radius(
5px, bottom);
137 .box-shadow(
0,
6px,
8px,
0.5);
142 var editor = CodeMirror.fromTextArea(document.getElementById(
"code"), {
144 matchBrackets : true,
149 <p>The LESS mode is a sub-mode of the
<a href=
"index.html">CSS mode
</a> (defined in
<code>css.js
</code>.
</p>
151 <p><strong>Parsing/Highlighting Tests:
</strong> <a href=
"../../test/index.html#less_*">normal
</a>,
<a href=
"../../test/index.html#verbose,less_*">verbose
</a>.
</p>