5 <title>CodeMirror: LESS mode</title>
6 <link rel="stylesheet" href="../../lib/codemirror.css">
7 <script src="../../lib/codemirror.js"></script>
8 <script src="../../addon/edit/matchbrackets.js"></script>
9 <script src="less.js"></script>
10 <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px; height: 400px}</style>
11 <link rel="stylesheet" href="../../doc/docs.css">
12 <link rel="stylesheet" href="../../theme/lesser-dark.css">
15 <h1>CodeMirror: LESS mode</h1>
16 <form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
17 @media screen and (device-aspect-ratio: 32/18) { … }
18 @media screen and (device-aspect-ratio: 1280/720) { … }
19 @media screen and (device-aspect-ratio: 2560/1440) { … }
26 tr:nth-child(2n+1) /* represents every odd row of an HTML table */
27 tr:nth-child(odd) /* same */
28 tr:nth-child(2n+0) /* represents every even row of an HTML table */
29 tr:nth-child(even) /* same */
31 /* Alternate paragraph colours in CSS */
32 p:nth-child(4n+1) { color: navy; }
33 p:nth-child(4n+2) { color: green; }
34 p:nth-child(4n+3) { color: maroon; }
35 p:nth-child(4n+4) { color: purple; }
37 :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
38 :nth-child(10n+9) /* Same */
39 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
46 html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */
48 img:nth-of-type(2n+1) { float: right; }
49 img:nth-of-type(2n) { float: left; }
51 body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
52 body > h2:not(:first-of-type):not(:last-of-type)
54 html|*:not(:link):not(:visited)
56 p::first-line { text-transform: uppercase }
58 p { color: red; font-size: 12pt }
59 p::first-letter { color: green; font-size: 200% }
60 p::first-line { color: blue }
62 p { line-height: 1.1 }
63 p::first-letter { font-size: 3em; font-weight: normal }
64 span { font-weight: bold }
66 * /* a=0 b=0 c=0 -> specificity = 0 */
67 LI /* a=0 b=0 c=1 -> specificity = 1 */
68 UL LI /* a=0 b=0 c=2 -> specificity = 2 */
69 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
70 H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
71 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
72 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
73 #x34y /* a=1 b=0 c=0 -> specificity = 100 */
74 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
76 @namespace foo url(http://www.example.com);
77 foo|h1 { color: blue } /* first rule */
78 foo|* { color: yellow } /* second rule */
79 |h1 { color: red } /* ...*/
83 span[hello="Ocean"][goodbye="Land"]
85 a[rel~="copyright"] { ... }
86 a[href="http://www.w3.org/"] { ... }
88 DIALOGUE[character=romeo]
89 DIALOGUE[character=juliet]
95 @namespace foo "http://www.example.com";
96 [foo|att=val] { color: blue }
97 [*|att] { color: yellow }
98 [|att] { color: green }
99 [att] { color: green }
102 *:target { color : red }
103 *:target::before { content : url(target.png) }
114 input[type="search"]::-webkit-search-decoration,
115 input[type="search"]::-webkit-search-cancel-button {
116 -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
118 button::-moz-focus-inner,
119 input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
124 // reset here as of 2.0.3 due to Recess property order
126 border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
128 fieldset span button, fieldset span input[type="file"] {
130 font-family:Arial, Helvetica, sans-serif;
132 .el tr:nth-child(even):last-child td:first-child{
133 -moz-border-radius-bottomleft:3px;
134 -webkit-border-bottom-left-radius:3px;
135 border-bottom-left-radius:3px;
147 button.icon-plus { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus) no-repeat; }
148 button.icon-chart { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart) no-repeat; }
150 button:hover { background-color: #999; }
151 button:active { background-color: #666; }
153 @test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id
154 @test_b: #eeeFFF //this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id
161 background-image: url(dir/output/sheep.png), url( betweengrassandsky.png );
162 background-position: center bottom, left top;
163 background-repeat: no-repeat;
169 .box-shadow(@style, @c) when (iscolor(@c)) {
170 box-shadow: @style @c;
171 -webkit-box-shadow: @style @c;
172 -moz-box-shadow: @style @c;
174 .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
175 .box-shadow(@style, rgba(0, 0, 0, @alpha));
188 .rounded-corners (@radius: 5px) {
189 border-radius: @radius;
190 -webkit-border-radius: @radius;
191 -moz-border-radius: @radius;
198 .rounded-corners(10px);
201 .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
202 @val: @x @y @blur rgba(0, 0, 0, @alpha);
205 -webkit-box-shadow: @val;
206 -moz-box-shadow: @val;
208 .box { @base: #f938ab;
209 color: saturate(@base, 5%);
210 border-color: lighten(@base, 30%);
211 div { .box-shadow(0, 0, 5px, 0.4) }
214 @import url("something.css");
216 @light-blue: hsl(190, 50%, 65%);
217 @light-yellow: desaturate(#fefec8, 10%);
218 @dark-yellow: desaturate(darken(@light-yellow, 10%), 40%);
219 @darkest: hsl(20, 0%, 15%);
220 @dark: hsl(190, 20%, 30%);
221 @medium: hsl(10, 60%, 30%);
222 @light: hsl(90, 40%, 20%);
223 @lightest: hsl(90, 20%, 90%);
224 @highlight: hsl(80, 50%, 90%);
225 @blue: hsl(210, 60%, 20%);
226 @alpha-blue: hsla(210, 60%, 40%, 0.5);
228 .box-shadow (@x, @y, @blur, @alpha) {
229 @value: @x @y @blur rgba(0, 0, 0, @alpha);
231 -moz-box-shadow: @value;
232 -webkit-box-shadow: @value;
234 .border-radius (@radius) {
235 border-radius: @radius;
236 -moz-border-radius: @radius;
237 -webkit-border-radius: @radius;
240 .border-radius (@radius, bottom) {
241 border-top-right-radius: 0;
242 border-top-left-radius: 0;
243 -moz-border-top-right-radius: 0;
244 -moz-border-top-left-radius: 0;
245 -webkit-border-top-left-radius: 0;
246 -webkit-border-top-right-radius: 0;
248 .border-radius (@radius, right) {
249 border-bottom-left-radius: 0;
250 border-top-left-radius: 0;
251 -moz-border-bottom-left-radius: 0;
252 -moz-border-top-left-radius: 0;
253 -webkit-border-bottom-left-radius: 0;
254 -webkit-border-top-left-radius: 0;
256 .box-shadow-inset (@x, @y, @blur, @color) {
257 box-shadow: @x @y @blur @color inset;
258 -moz-box-shadow: @x @y @blur @color inset;
259 -webkit-box-shadow: @x @y @blur @color inset;
262 font-family: 'Bitstream Vera Sans Mono',
266 monospace !important;
270 white-space: pre-wrap; /* css-3 */
271 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
272 white-space: -pre-wrap; /* Opera 4-6 */
273 white-space: -o-pre-wrap; /* Opera 7 */
274 word-wrap: break-word; /* Internet Explorer 5.5+ */
279 background-color: @darkest;
281 font-family: Arial, sans-serif;
285 nav, header, footer, section, article {
293 text-decoration: none;
296 text-decoration: underline;
303 list-style-type: none;
307 .string, .regexp { color: @dark }
308 .keyword { font-weight: bold }
309 .comment { color: rgba(0, 0, 0, 0.5) }
310 .number { color: @blue }
311 .class, .special { color: rgba(0, 50, 100, 0.8) }
334 background: url(/images/logo.png) no-repeat;
339 nav a, #dropdown li {
340 display: inline-block;
345 text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
346 text-decoration: none;
347 border: 2px solid transparent;
351 text-decoration: none;
356 border: 2px solid darken(@red, 25%);
357 border-left-color: darken(@red, 15%);
358 border-right-color: darken(@red, 15%);
361 background-color: darken(@red, 10%);
375 background-color: @blue;
377 border-top: 2px solid lighten(@alpha-blue, 20%);
378 border-bottom: 2px solid darken(@alpha-blue, 25%);
379 .box-shadow(0, 1px, 8px, 0.6);
380 -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
383 background-color: hsla(210, 60%, 40%, 0.4);
386 background-color: @blue;
395 border-top: 2px solid @medium;
397 border: 2px solid darken(@medium, 25%);
398 border-left-color: darken(@medium, 15%);
399 border-right-color: darken(@medium, 15%);
401 background-color: darken(@medium, 10%);
414 text-decoration: none;
417 background-color: darken(@medium, 15%);
418 text-decoration: none;
422 .border-radius(5px, bottom);
423 .box-shadow(0, 6px, 8px, 0.5);
430 background-color: @light-blue;
431 border-top: 8px solid darken(@light-blue, 5%);
434 background-color: lighten(@light-blue, 25%);
442 font-family: 'Droid Serif', 'Georgia';
444 padding: 45px 20px 23px 30px;
445 border: 2px dashed darken(@light-blue, 10%);
446 .box-shadow(1px, 0px, 6px, 0.5);
449 #download { color: transparent; border: 0; float: left; display: inline-block; margin: 15px 0 15px -5px; }
450 #download img { display: inline-block}
455 color: @blue + #333; display: inline; float: left; margin: 36px 0 0 15px }
469 margin: 30px 0 15px 0;
471 text-shadow: 0px 0px 0px @lightest;
472 span { color: @medium }
479 text-shadow: 0px 1px 1px @lightest;
483 text-shadow: 0 -1px 1px @darkest;
485 background-color: desaturate(@darkest, 8%);
488 color: lighten(@lightest, 2%);
489 background-repeat: repeat;
491 border: 1px dashed @lightest;
493 .box-shadow(0, 0px, 15px, 0.5);
496 code .attribute { color: hsl(40, 50%, 70%) }
497 code .variable { color: hsl(120, 10%, 50%) }
498 code .element { color: hsl(170, 20%, 50%) }
500 code .string, .regexp { color: hsl(75, 50%, 65%) }
501 code .class { color: hsl(40, 40%, 60%); font-weight: normal }
502 code .id { color: hsl(50, 40%, 60%); font-weight: normal }
503 code .comment { color: rgba(255, 255, 255, 0.2) }
504 code .number, .color { color: hsl(10, 40%, 50%) }
505 code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
506 #time { color: #aaa }
524 font-family: 'Georgia', serif;
533 border-style: dashed;
543 p + h1 { margin-top: 60px }
545 margin: 30px 0 15px 0;
547 p + h2, pre + h2, code + h2 {
548 border-top: 6px solid rgba(255, 255, 255, 0.1);
558 @bg: lighten(@light-blue, 5%);
559 border-top: 2px solid lighten(@bg, 5%);
561 background-color: @light-blue;
562 .box-shadow(0, -2px, 5px, 0.2);
565 font-family: 'Droid Serif', 'Georgia', serif;
570 margin: 30px 0 !important;
571 text-shadow: 0px 1px 1px @lightest;
576 border-color: transparent;
577 background-color: lighten(@light-blue, 25%);
578 .box-shadow(0, 5px, 5px, 0.4);
581 @background: lighten(@bg, 30%);
582 color: lighten(@blue, 10%);
583 background-color: @background;
584 border-color: lighten(@light-blue, 25%);
586 code .attribute { color: hsl(40, 50%, 30%) }
587 code .variable { color: hsl(120, 10%, 30%) }
588 code .element { color: hsl(170, 20%, 30%) }
590 code .string, .regexp { color: hsl(75, 50%, 35%) }
591 code .class { color: hsl(40, 40%, 30%); font-weight: normal }
592 code .id { color: hsl(50, 40%, 30%); font-weight: normal }
593 code .comment { color: rgba(0, 0, 0, 0.4) }
594 code .number, .color { color: hsl(10, 40%, 30%) }
595 code .class, code .mixin, .special { color: hsl(190, 20%, 30%) }
597 pre code { font-size: 15px }
598 p + h2, pre + h2, code + h2 { border-top-color: rgba(0, 0, 0, 0.1) }
605 .box-shadow(0, 5px, 5px, 0.2);
615 h3 { font-size: 22px }
620 border-style: dashed;
622 pre { border: 0; margin: 0 }
626 background-color: desaturate(darken(@darkest, 5%), 20%);
638 //border-right: 1px dotted rgba(255, 255, 255, 0.5) !important;
640 .css-output, .less-example {
649 #about, #synopsis, #guide {
651 text-decoration: none;
652 color: @light-yellow;
653 border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
655 text-decoration: none;
656 border-bottom: 1px dashed @light-yellow;
659 @bg: desaturate(darken(@darkest, 5%), 20%);
660 text-shadow: 0 -1px 1px lighten(@bg, 5%);
662 background-color: @bg;
664 background-color: desaturate(@darkest, 20%);
666 .box-shadow(0, 5px, 5px, 0.4);
672 code .attribute { color: hsl(40, 50%, 70%) }
673 code .variable { color: hsl(120, 10%, 50%) }
674 code .element { color: hsl(170, 20%, 50%) }
676 code .string, .regexp { color: hsl(75, 50%, 65%) }
677 code .class { color: hsl(40, 40%, 60%); font-weight: normal }
678 code .id { color: hsl(50, 40%, 60%); font-weight: normal }
679 code .comment { color: rgba(255, 255, 255, 0.2) }
680 code .number, .color { color: hsl(10, 40%, 50%) }
681 code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
682 background-color: @bg;
683 border-color: darken(@light-yellow, 5%);
686 color: darken(@dark-yellow, 5%);
687 .string, .regexp { color: desaturate(@light-blue, 15%) }
688 .keyword { color: hsl(40, 40%, 60%); font-weight: normal }
689 .comment { color: rgba(255, 255, 255, 0.2) }
690 .number { color: lighten(@blue, 10%) }
691 .class, .special { color: hsl(190, 20%, 50%) }
695 background-color: @darkest;
697 background-color: transparent;
703 background-color: @darkest !important;
705 background-color: desaturate(lighten(@darkest, 3%), 5%);
709 background-color: desaturate(lighten(@darkest, 3%), 5%) !important;
711 background-color: desaturate(lighten(@darkest, 3%), 5%);
717 .box-shadow(0, 0px, 0px, 0.0);
723 border-top: 6px solid rgba(0, 0, 0, 0.1);
726 color: rgba(255, 255, 255, 0.35);
727 #copy { font-size: 12px }
728 text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02);
732 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
733 theme: "lesser-dark",
739 <p><strong>MIME types defined:</strong> <code>text/x-less</code>, <code>text/css</code> (if not previously defined).</p>