scripts/CodeMirror/mode/css/less.html (view raw)
1<!doctype html>
2
3<title>CodeMirror: LESS 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 {border: 1px solid #ddd; line-height: 1.2;}</style>
12<div id=nav>
13 <a href="https://codemirror.net"><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/codemirror">Code</a>
19 </ul>
20 <ul>
21 <li><a href="../index.html">Language modes</a>
22 <li><a class=active href="#">LESS</a>
23 </ul>
24</div>
25
26<article>
27<h2>LESS mode</h2>
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) { … }
31
32html:lang(fr-be)
33
34tr:nth-child(2n+1) /* represents every odd row of an HTML table */
35
36img:nth-of-type(2n+1) { float: right; }
37img:nth-of-type(2n) { float: left; }
38
39body > h2:not(:first-of-type):not(:last-of-type)
40
41html|*:not(:link):not(:visited)
42*|*:not(:hover)
43p::first-line { text-transform: uppercase }
44
45@namespace foo url(http://www.example.com);
46foo|h1 { color: blue } /* first rule */
47
48span[hello="Ocean"][goodbye="Land"]
49
50E[foo]{
51 padding:65px;
52}
53
54input[type="search"]::-webkit-search-decoration,
55input[type="search"]::-webkit-search-cancel-button {
56 -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
57}
58button::-moz-focus-inner,
59input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
60 padding: 0;
61 border: 0;
62}
63.btn {
64 // reset here as of 2.0.3 due to Recess property order
65 border-color: #ccc;
66 border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
67}
68fieldset span button, fieldset span input[type="file"] {
69 font-size:12px;
70 font-family:Arial, Helvetica, sans-serif;
71}
72
73.rounded-corners (@radius: 5px) {
74 border-radius: @radius;
75 -webkit-border-radius: @radius;
76 -moz-border-radius: @radius;
77}
78
79@import url("something.css");
80
81@light-blue: hsl(190, 50%, 65%);
82
83#menu {
84 position: absolute;
85 width: 100%;
86 z-index: 3;
87 clear: both;
88 display: block;
89 background-color: @blue;
90 height: 42px;
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.
95
96 &.docked {
97 background-color: hsla(210, 60%, 40%, 0.4);
98 }
99 &:hover {
100 background-color: @blue;
101 }
102
103 #dropdown {
104 margin: 0 0 0 117px;
105 padding: 0;
106 padding-top: 5px;
107 display: none;
108 width: 190px;
109 border-top: 2px solid @medium;
110 color: @highlight;
111 border: 2px solid darken(@medium, 25%);
112 border-left-color: darken(@medium, 15%);
113 border-right-color: darken(@medium, 15%);
114 border-top-width: 0;
115 background-color: darken(@medium, 10%);
116 ul {
117 padding: 0px;
118 }
119 li {
120 font-size: 14px;
121 display: block;
122 text-align: left;
123 padding: 0;
124 border: 0;
125 a {
126 display: block;
127 padding: 0px 15px;
128 text-decoration: none;
129 color: white;
130 &:hover {
131 background-color: darken(@medium, 15%);
132 text-decoration: none;
133 }
134 }
135 }
136 .border-radius(5px, bottom);
137 .box-shadow(0, 6px, 8px, 0.5);
138 }
139}
140</textarea></form>
141 <script>
142 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
143 lineNumbers: true,
144 matchBrackets: true,
145 mode: "text/x-less"
146 });
147 </script>
148
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>
150
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>
152 </article>