1
1
// SYNTAX TEST "Packages/LESS/LESS.sublime-syntax"
2
2
3
- @import (reference ) " @{themes} /tidal-wave.less" ;
4
- // ^^^^^^^^^^^ meta.at-rule.css meta.group.less meta.function.parameters.less
5
- // ^ punctuation.definition.group.begin.less
6
- // ^ punctuation.definition.group.end.less
7
- // ^ variable.other.less punctuation.definition.variable.less
8
- // ^ string.quoted.double.css variable.other.less string.interpolated.less
9
- // ^ punctuation.terminator.statement.css
10
- @import " mixins" ;
11
- // <- meta.at-rule.css keyword.control.at-rule.css punctuation.definition.keyword.css
12
- // ^ meta.at-rule.css keyword.control.at-rule.css
13
- // ^^^^^^^^ string.quoted.double.css
14
- // ^ punctuation.definition.string.begin.css
15
- // ^ punctuation.definition.string.end.css
16
- @import url(" https://fonts.googleapis.com/css?family=Source+Code+Pro:400" );
17
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.less meta.at-rule.css meta.group.css string.quoted.double.css
18
- // ^ punctuation.definition.string.begin.css
19
- // ^ punctuation.definition.string.end.css
20
- @import url(somefile);
21
- // ^ punctuation.definition.group.begin.css
22
- // ^^^ meta.function-call.css support.function.url.css
23
- // ^^^^^^^^ meta.group.css string.unquoted.css
24
- // ^ punctuation.definition.group.end.css
25
- @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
26
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.unquoted.css
27
-
28
3
@foreground-color : grayscale (#333 );
29
4
// <- variable.declaration.less punctuation.definition.variable.less
30
5
// ^ variable.declaration.less
41
16
42
17
43
18
filter ,
44
- // ^ entity.name.tag.css
19
+ // ^^^ meta.selector.css entity.name.tag.css
20
+ // ^ punctuation.separator.css - meta.selector.css
45
21
filter {}
22
+ // ^ - meta.selector.css
46
23
// ^ entity.name.tag.css
47
24
filter {}
48
25
// ^ entity.name.tag.css
49
26
#main h1 + .sub {
27
+ // <- entity.other.attribute-name.id.css punctuation.definition.entity.css
28
+ // ^^ entity.other.attribute-name.id.css
50
29
// ^^ meta.selector.css entity.name.tag.css
30
+ // ^ - meta.selector.css
51
31
// ^ - constant.numeric
52
32
// ^ punctuation.section.property-list.begin.css
53
33
filter ::before {}
54
34
// ^ entity.name.tag.css
35
+ // ^^^^^^^^ entity.other.pseudo-element.css
36
+ // ^^ punctuation.definition.entity.css
55
37
// ^ punctuation.section.property-list.begin.css
56
38
// ^ punctuation.section.property-list.end.css
57
39
html {}
@@ -60,12 +42,20 @@ html:after,
60
42
// ^ entity.other.pseudo-element.css punctuation.definition.entity.css
61
43
// ^ entity.other.pseudo-element.css
62
44
html :hover ,
45
+ // ^ entity.name.tag.css
63
46
// ^ entity.other.pseudo-class.css punctuation.definition.entity.css
64
47
// ^ entity.other.pseudo-class.css
65
48
html ::before {
66
49
// ^ entity.name.tag.css, keyword.control.html.elements
67
50
// ^^ entity.other.pseudo-element.css punctuation.definition.entity.css
68
51
// ^ entity.other.pseudo-element.css
52
+ & :first-child {}
53
+ // ^^^^^^^^^^^^^ meta.selector.css
54
+ // ^^^^^^^^^^^^ entity.other.pseudo-class.css
55
+ // ^ keyword.operator.ampersand.less
56
+ // ^ punctuation.definition.entity.css
57
+ & + & {}
58
+ // ^ punctuation.separator.combinator.css
69
59
font-family : ' Lucida Grande' , Verdana , sans-serif ;
70
60
font-size : 16px ;
71
61
line-height : ~ " calc(@{space} + 4px)" ;
@@ -113,16 +103,6 @@ html::before {
113
103
// ^ meta.property-value.css support.constant.color.w3c-standard-color-name.css
114
104
filter : drop-shadow (0 0 2px rgba (0 , 0 , 0 , 0.3 ));
115
105
// ^ support.type.property-name.css
116
- filter ,
117
- // ^ entity.name.tag.css
118
- filter {}
119
- // ^ entity.name.tag.css
120
- filter {}
121
- // ^ entity.name.tag.css
122
- filter :hover {}
123
- // ^ entity.name.tag.css
124
- filter ::before {}
125
- // ^ entity.name.tag.css
126
106
127
107
.fade-in (@selector ) {
128
108
@keyframes fade - in- animation {
@@ -146,8 +126,6 @@ html::before {
146
126
}
147
127
}
148
128
}
149
- a [value= " text" ], a [value= " text" ] { }
150
- // ^ punctuation.definition.entity.css
151
129
a [data- property= " text" ] {
152
130
// ^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-selector.css
153
131
// ^ punctuation.definition.entity.css
@@ -160,6 +138,8 @@ html::before {
160
138
a [value^= " text" ] {
161
139
// ^ meta.attribute-selector.css entity.other.attribute-name.css
162
140
// ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
141
+ a [value= " text" ], a [value= " text" ] { }
142
+ // ^ punctuation.definition.entity.css
163
143
a [href~= " #" ] {
164
144
// ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
165
145
a [value|= ' text' ] {
@@ -209,10 +189,63 @@ html::before {
209
189
}
210
190
211
191
192
+ #variables {
193
+ @variable : 10px ;
194
+ @another-variable : @variable ;
195
+
196
+ width : @variable + @another-variable ;
197
+ width : @variable * 2 ;
198
+
199
+ .@{varname} --subclass #another @{variable} id[data- attr= " text" ] { color : @orangy ; }
200
+ // ^ entity.other.attribute-name.class.css
201
+ // ^ entity.other.attribute-name.id.css punctuation.definition.entity.css
202
+ // ^ entity.other.attribute-name.id.css variable.other.less punctuation.definition.variable.less
203
+ // ^ entity.other.attribute-name.id.css
204
+ }
205
+ #@{varname} --subclass { color : @orangy ; }
206
+ // ^ entity.other.attribute-name.id.css
207
+
208
+ .use-mixin {
209
+ // ^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
210
+ &--bem {}
211
+ // ^^^^^ meta.selector.css entity.other.attribute-name
212
+ // ^ keyword.operator.ampersand.less
213
+ &_bem {}
214
+ // ^^^^ meta.selector.css entity.other.attribute-name
215
+ // ^ - meta.selector.css
216
+ }
217
+ .accordion__copy ,
218
+ // ^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
219
+ .accordion__copy--open {}
220
+ // ^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
221
+
212
222
#namespace when (@mode = huge) {
213
223
// ^ meta.function.parameters.less keyword.operator.less
214
- .mixin { /* */ }
215
- .mixin () { /* */ }
224
+
225
+ .a-test-mixin (@color : black ; /* @margin: 10px;*/ @padding : 20px ) when (lightness (@a ) >= 50% ) {
226
+ // <- entity.other.less.mixin
227
+ // ^^^^^^^ entity.other.less.mixin
228
+ // ^^^^^^^^^^^^^^^^^^ comment.block.css
229
+ // ^^ punctuation.definition.comment.css
230
+ // ^^ punctuation.definition.comment.css
231
+ // ^^ keyword.operator.less
232
+ // ^^ meta.function.parameters.less variable.other.less
233
+ // ^ punctuation.definition.variable.less
234
+ .nested {
235
+ @media screen and (max-width : 100px ) {
236
+ .mixin (@a ) when not (isnumber (@a )) and (@a > 0 ) ... }
237
+ // ^^^^^^ entity.other.less.mixin
238
+ // ^^ keyword.operator.less
239
+ // ^^^^^^^^ meta.function-call.less support.function.less
240
+ }
241
+ }
242
+ color : mix (@grey4 , @grey5 );
243
+ // ^ meta.property-value.css meta.function-call.less support.function.less
244
+ background : mix (@white , mix (@grey4 , @grey5 ));
245
+ // ^ meta.property-value.css meta.function-call.less support.function.less
246
+ background-color : linear-gradient (@white , mix(@grey4, mix(@grey4, @grey5)));
247
+ // ^ meta.property-value.css meta.function-call.less support.function.less
248
+ padding : @padding ;
216
249
}
217
250
.mixin (@a ) when not (isnumber (@a )) and (@a > 0 ) ... }
218
251
// ^ entity.other.attribute-name.class.css entity.other.less.mixin
@@ -272,6 +305,31 @@ html::before {
272
305
// ^ meta.property-value.css meta.group.css string.quoted.single.css punctuation.definition.string.end.css
273
306
// ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css
274
307
}
308
+ @import (reference ) " @{themes} /tidal-wave.less" ;
309
+ // ^^^^^^^^^^^ meta.at-rule.css meta.group.less meta.function.parameters.less
310
+ // ^ punctuation.definition.group.begin.less
311
+ // ^ punctuation.definition.group.end.less
312
+ // ^ variable.other.less punctuation.definition.variable.less
313
+ // ^ string.quoted.double.css variable.other.less string.interpolated.less
314
+ // ^ punctuation.terminator.statement.css
315
+ @import " mixins" ;
316
+ // <- meta.at-rule.css keyword.control.at-rule.css punctuation.definition.keyword.css
317
+ // ^ meta.at-rule.css keyword.control.at-rule.css
318
+ // ^^^^^^^^ string.quoted.double.css
319
+ // ^ punctuation.definition.string.begin.css
320
+ // ^ punctuation.definition.string.end.css
321
+ @import url(" https://fonts.googleapis.com/css?family=Source+Code+Pro:400" );
322
+ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.less meta.at-rule.css meta.group.css string.quoted.double.css
323
+ // ^ punctuation.definition.string.begin.css
324
+ // ^ punctuation.definition.string.end.css
325
+ @import url(somefile);
326
+ // ^ punctuation.definition.group.begin.css
327
+ // ^^^ meta.function-call.css support.function.url.css
328
+ // ^^^^^^^^ meta.group.css string.unquoted.css
329
+ // ^ punctuation.definition.group.end.css
330
+ @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
331
+ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.unquoted.css
332
+
275
333
276
334
// http://lesscss.org/features/#detached-rulesets-feature
277
335
header {
@@ -310,68 +368,3 @@ header {
310
368
});
311
369
// ^ punctuation.section.property-list.end.css
312
370
}
313
-
314
- @import " variables" ;
315
- @import (reference ) " variables" ;
316
-
317
- #variables {
318
- @variable : 10px ;
319
- @another-variable : @variable ;
320
-
321
- width : @variable + @another-variable ;
322
- width : @variable * 2 ;
323
-
324
- & :first-child {}
325
-
326
- .@{varname} --subclass #another @{variable} id[data- attr= " text" ] { color : @orangy ; }
327
- // ^ entity.other.attribute-name.class.css
328
- // ^ entity.other.attribute-name.id.css punctuation.definition.entity.css
329
- // ^ entity.other.attribute-name.id.css variable.other.less punctuation.definition.variable.less
330
- // ^ entity.other.attribute-name.id.css
331
- }
332
- #@{varname} --subclass { color : @orangy ; }
333
- // ^ entity.other.attribute-name.id.css
334
- .functions {
335
- color : hue (orange );
336
- color : lighten (@color , 10% );
337
- color : mix (@color , #000 , 25% );
338
- width : max (5 , 10 );
339
- width : unit (.5 , px);
340
- }
341
-
342
- .nested {
343
- .class {}
344
- & ::before {}
345
- // ^^^^^^^^^ meta.selector.css
346
- // ^ keyword.operator.ampersand.less
347
- & + & {}
348
- // ^ punctuation.separator.combinator.css
349
- .class & {}
350
- @media screen and (max-width : 100px ) {
351
- .mixin (@a ) when not (isnumber (@a )) and (@a > 0 ) ... }
352
- }
353
- }
354
-
355
- .a-test-mixin (@color : black ; /* @margin: 10px;*/ @padding : 20px ) when (lightness (@a ) >= 50% ) {
356
- color : mix (@grey4 , @grey5 );
357
- // ^ meta.property-value.css meta.function-call.less support.function.less
358
- background : mix (@white , mix (@grey4 , @grey5 ));
359
- // ^ meta.property-value.css meta.function-call.less support.function.less
360
- background-color : linear-gradient (@white , mix(@grey4, mix(@grey4, @grey5)));
361
- // ^ meta.property-value.css meta.function-call.less support.function.less
362
- padding : @padding ;
363
- }
364
-
365
- .use-mixin {
366
- &--bem {}
367
- &_bem {}
368
- }
369
-
370
- .class {}
371
- .extended {
372
- & :extend(.class );
373
- background : blue ;
374
- }
375
-
376
- .guard () when (lightness (@a ) >= 50% ) {}
377
- .guard ();
0 commit comments