LESS mode

​x
 
1
@media screen and (device-aspect-ratio: 16/9) { … }
2
@media screen and (device-aspect-ratio: 1280/720) { … }
3
@media screen and (device-aspect-ratio: 2560/1440) { … }
4
​
5
html:lang(fr-be)
6
​
7
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
8
​
9
img:nth-of-type(2n+1) { float: right; }
10
img:nth-of-type(2n) { float: left; }
11
​
12
body > h2:not(:first-of-type):not(:last-of-type)
13
​
14
html|*:not(:link):not(:visited)
15
*|*:not(:hover)
16
p::first-line { text-transform: uppercase }
17
​
18
@namespace foo url(http://www.example.com);
19
foo|h1 { color: blue }  /* first rule */
20
​
21
span[hello="Ocean"][goodbye="Land"]
22
​
23
E[foo]{
24
  padding:65px;
25
}
26
​
27
input[type="search"]::-webkit-search-decoration,
28
input[type="search"]::-webkit-search-cancel-button {
29
  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
30
}
31
button::-moz-focus-inner,
32
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
33
  padding: 0;
34
  border: 0;
35
}
36
.btn {
37
  // reset here as of 2.0.3 due to Recess property order
38
  border-color: #ccc;
39
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
40
}
41
fieldset span button, fieldset span input[type="file"] {
42
  font-size:12px;
43
    font-family:Arial, Helvetica, sans-serif;
44
}
45
​
46
.rounded-corners (@radius: 5px) {
47
  border-radius: @radius;
48
  -webkit-border-radius: @radius;
49
  -moz-border-radius: @radius;
50
}
51
​
52
@import url("something.css");
53
​
54
@light-blue:   hsl(190, 50%, 65%);
55
​
56
#menu {
57
  position: absolute;
58
  width: 100%;
59
  z-index: 3;
60
  clear: both;
61
  display: block;
62
  background-color: @blue;
63
  height: 42px;
64
  border-top: 2px solid lighten(@alpha-blue, 20%);
65
  border-bottom: 2px solid darken(@alpha-blue, 25%);
66
  .box-shadow(0, 1px, 8px, 0.6);
67
  -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
68
​
69
  &.docked {
70
    background-color: hsla(210, 60%, 40%, 0.4);
71
  }
72
  &:hover {
73
    background-color: @blue;
74
  }
75
​
76
  #dropdown {
77
    margin: 0 0 0 117px;
78
    padding: 0;
79
    padding-top: 5px;
80
    display: none;
81
    width: 190px;
82
    border-top: 2px solid @medium;
83
    color: @highlight;
84
    border: 2px solid darken(@medium, 25%);
85
    border-left-color: darken(@medium, 15%);
86
    border-right-color: darken(@medium, 15%);
87
    border-top-width: 0;
88
    background-color: darken(@medium, 10%);
89
    ul {
90
      padding: 0px;
91
    }
92
    li {
93
      font-size: 14px;
94
      display: block;
95
      text-align: left;
96
      padding: 0;
97
      border: 0;
98
      a {
99
        display: block;
100
        padding: 0px 15px;
101
        text-decoration: none;
102
        color: white;
103
        &:hover {
104
          background-color: darken(@medium, 15%);
105
          text-decoration: none;
106
        }
107
      }
108
    }
109
    .border-radius(5px, bottom);
110
    .box-shadow(0, 6px, 8px, 0.5);
111
  }
112
}
113
​

The LESS mode is a sub-mode of the CSS mode (defined in css.js).

Parsing/Highlighting Tests: normal, verbose.