Warning, /frameworks/syntax-highlighting/autotests/folding/highlight.less.fold is written in an unsupported language. File is not indexed.
0001 <beginfold id='1'>/*</beginfold id='1'>*
0002 * Less syntax highlighting test file
0003 *
0004 * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)
0005 *
0006 * @see http://lesscss.org/features/
0007 <endfold id='1'>*/</endfold id='1'>
0008
0009 .mixin(@color; @padding; @margin: 2) <beginfold id='2'>{</beginfold id='2'>
0010 colorr: @color;
0011 padding-3: @padding;
0012 margin: @margin @margin @margin @margin;
0013 <endfold id='2'>}</endfold id='2'>
0014
0015 @my-ruleset: <beginfold id='2'>{</beginfold id='2'>
0016 .my-selector <beginfold id='2'>{</beginfold id='2'>
0017 background-color: black;
0018 <endfold id='2'>}</endfold id='2'>
0019 <endfold id='2'>}</endfold id='2'>;
0020
0021 @bacon: red;
0022 @beacon: background-color;
0023 @baecon: @{w} + @w;
0024
0025 .noStar:extend(.class #sh:extend(#hhh) ) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0026 .noStar:nth-child(w: red) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0027
0028 @media (max-width: @width2) and handheld <beginfold id='2'>{</beginfold id='2'>
0029 height: auto;
0030 <endfold id='2'>}</endfold id='2'>
0031
0032 .test when (@color = blue) .ffff <beginfold id='2'>{</beginfold id='2'>color: red;<endfold id='2'>}</endfold id='2'>
0033
0034 .foo (@bg: #f5f5f5, @color: #900) <beginfold id='2'>{</beginfold id='2'>
0035 background: @bg;
0036 color: @color;
0037
0038 .x <beginfold id='2'>{</beginfold id='2'>
0039 x: @nn;
0040 a: white @{nn@{ww}};
0041 background: red;
0042 <endfold id='2'>}</endfold id='2'>
0043 <endfold id='2'>}</endfold id='2'>
0044
0045 // Variables
0046
0047 @link-color: #428bca; // sea blue
0048 @link-color-hover: darken(@link-color, 10%);
0049
0050 a, .link <beginfold id='2'>{</beginfold id='2'>
0051 color: @link-color;
0052 <endfold id='2'>}</endfold id='2'>
0053
0054 a:hover <beginfold id='2'>{</beginfold id='2'>
0055 color: @link-color-hover;
0056 <endfold id='2'>}</endfold id='2'>
0057
0058 .widget <beginfold id='2'>{</beginfold id='2'>
0059 color: #fff;
0060 background: @link-color;
0061 <endfold id='2'>}</endfold id='2'>
0062
0063 // Variable interpolation
0064
0065 @my-selector: banner;
0066
0067 .@{my-selector} when (@s = calc("s"); @{s} = calc("dddd")) <beginfold id='2'>{</beginfold id='2'>
0068 font-weight: bold;
0069 line-height+: 40px;
0070 margin: 0 auto;
0071 <endfold id='2'>}</endfold id='2'>
0072
0073 @images: "../img";
0074
0075 body <beginfold id='2'>{</beginfold id='2'>
0076 color: #444;
0077 background: url("@{images}/white-sand.png");
0078 <endfold id='2'>}</endfold id='2'>
0079
0080 @themes: "../../src/themes";
0081
0082 @import "@{themes}/tidal-wave.less";
0083
0084 @property: color;
0085
0086 .widget <beginfold id='2'>{</beginfold id='2'>
0087 @{property}: #0ee;
0088 background-@{property}: #999;
0089 <endfold id='2'>}</endfold id='2'>
0090
0091 // Variable names
0092
0093 @fnord: "I am fnord.";
0094 @var: "fnord";
0095
0096 .variable-names-example <beginfold id='2'>{</beginfold id='2'>
0097 content: @@var;
0098 <endfold id='2'>}</endfold id='2'>
0099
0100 // Lazy Evaluation
0101
0102 .lazy-eval <beginfold id='2'>{</beginfold id='2'>
0103 width: @var;
0104 <endfold id='2'>}</endfold id='2'>
0105
0106 @var: @a;
0107 @a: 9%;
0108
0109 @var: 0;
0110 .class <beginfold id='2'>{</beginfold id='2'>
0111 @var: 1;
0112 .brass <beginfold id='2'>{</beginfold id='2'>
0113 @var: 2;
0114 three: @var;
0115 @var: 3;
0116 <endfold id='2'>}</endfold id='2'>
0117 one: @var;
0118 <endfold id='2'>}</endfold id='2'>
0119
0120 // Default Variables
0121
0122 @base-color: green;
0123 @dark-color: darken(@base-color, 10%);
0124
0125 @import "library.less";
0126 @base-color: red;
0127
0128 // Extend
0129
0130 nav ul <beginfold id='2'>{</beginfold id='2'>
0131 &:extend(.inline);
0132 background: blue;
0133 <endfold id='2'>}</endfold id='2'>
0134 .inline <beginfold id='2'>{</beginfold id='2'>
0135 color: red;
0136 <endfold id='2'>}</endfold id='2'>
0137
0138 // Extend Syntax
0139
0140 .e:extend(.f) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0141 .e:extend(.g) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0142
0143 .e:extend(.f, .g) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0144
0145 // Extend Attached to Selector
0146
0147 .big-division,
0148 .big-bag:extend(.bag),
0149 .big-bucket:extend(.bucket) <beginfold id='2'>{</beginfold id='2'>
0150 <endfold id='2'>}</endfold id='2'>
0151
0152 // Extend Inside Ruleset
0153
0154 pre:hover,
0155 .some-class <beginfold id='2'>{</beginfold id='2'>
0156 &:extend(div pre);
0157 <endfold id='2'>}</endfold id='2'>
0158
0159 pre:hover:extend(div pre),
0160 .some-class:extend(div pre) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0161
0162 // Extending Nested Selectors
0163
0164 .bucket <beginfold id='2'>{</beginfold id='2'>
0165 tr <beginfold id='2'>{</beginfold id='2'>
0166 color: blue;
0167 <endfold id='2'>}</endfold id='2'>
0168 <endfold id='2'>}</endfold id='2'>
0169 .some-class:extend(.bucket tr) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0170
0171 // Exact Matching with Extend
0172
0173 *.class <beginfold id='2'>{</beginfold id='2'>
0174 color: blue;
0175 <endfold id='2'>}</endfold id='2'>
0176 .noStar:extend(.class) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0177
0178 link:hover:visited <beginfold id='2'>{</beginfold id='2'>
0179 color: blue;
0180 <endfold id='2'>}</endfold id='2'>
0181 .selector:extend(link:visited:hover) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0182
0183 // nth Expression
0184
0185 :nth-child(1n+3) <beginfold id='2'>{</beginfold id='2'>
0186 color: blue;
0187 <endfold id='2'>}</endfold id='2'>
0188 .child:extend(:nth-child(n+3)) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0189
0190 [title=identifier] <beginfold id='2'>{</beginfold id='2'>
0191 color: blue;
0192 <endfold id='2'>}</endfold id='2'>
0193 [title='identifier'] <beginfold id='2'>{</beginfold id='2'>
0194 color: blue;
0195 <endfold id='2'>}</endfold id='2'>
0196 [title="identifier"] <beginfold id='2'>{</beginfold id='2'>
0197 color: blue;
0198 <endfold id='2'>}</endfold id='2'>
0199
0200 .noQuote:extend([title=identifier]) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0201 .singleQuote:extend([title='identifier']) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0202 .doubleQuote:extend([title="identifier"]) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0203
0204 // Extend "all"
0205
0206 .a.b.test,
0207 .test.c <beginfold id='2'>{</beginfold id='2'>
0208 color: orange;
0209 <endfold id='2'>}</endfold id='2'>
0210 .test <beginfold id='2'>{</beginfold id='2'>
0211 &:hover <beginfold id='2'>{</beginfold id='2'>
0212 color: green;
0213 <endfold id='2'>}</endfold id='2'>
0214 <endfold id='2'>}</endfold id='2'>
0215
0216 .replacement:extend(.test all) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0217
0218 // Selector Interpolation with Extend
0219
0220 .bucket <beginfold id='2'>{</beginfold id='2'>
0221 color: blue;
0222 <endfold id='2'>}</endfold id='2'>
0223 @{variable}:extend(.bucket) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0224 @variable: .selector;
0225
0226 // Scoping / Extend Inside @media
0227
0228 @media print <beginfold id='2'>{</beginfold id='2'>
0229 .screenClass:extend(.selector) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0230 .selector <beginfold id='2'>{</beginfold id='2'>
0231 color: black;
0232 <endfold id='2'>}</endfold id='2'>
0233 <endfold id='2'>}</endfold id='2'>
0234 .selector <beginfold id='2'>{</beginfold id='2'>
0235 color: red;
0236 <endfold id='2'>}</endfold id='2'>
0237 @media screen <beginfold id='2'>{</beginfold id='2'>
0238 .selector <beginfold id='2'>{</beginfold id='2'>
0239 color: blue;
0240 <endfold id='2'>}</endfold id='2'>
0241 <endfold id='2'>}</endfold id='2'>
0242
0243 // Use Cases for Extend
0244
0245 .animal <beginfold id='2'>{</beginfold id='2'>
0246 background-color: black;
0247 color: white;
0248 <endfold id='2'>}</endfold id='2'>
0249 .bear <beginfold id='2'>{</beginfold id='2'>
0250 &:extend(.animal);
0251 background-color: brown;
0252 <endfold id='2'>}</endfold id='2'>
0253
0254 .my-inline-block <beginfold id='2'>{</beginfold id='2'>
0255 display: inline-block;
0256 font-size: 0;
0257 <endfold id='2'>}</endfold id='2'>
0258 .thing1 <beginfold id='2'>{</beginfold id='2'>
0259 &:extend(.my-inline-block);
0260 <endfold id='2'>}</endfold id='2'>
0261 .thing2 <beginfold id='2'>{</beginfold id='2'>
0262 &:extend(.my-inline-block);
0263 <endfold id='2'>}</endfold id='2'>
0264
0265 // Mixins
0266
0267 .a, #b <beginfold id='2'>{</beginfold id='2'>
0268 color: red;
0269 <endfold id='2'>}</endfold id='2'>
0270 .mixin-class <beginfold id='2'>{</beginfold id='2'>
0271 .a();
0272 <endfold id='2'>}</endfold id='2'>
0273 .mixin-id <beginfold id='2'>{</beginfold id='2'>
0274 #b();
0275 <endfold id='2'>}</endfold id='2'>
0276
0277 // Not Outputting the Mixin
0278
0279 .my-mixin <beginfold id='2'>{</beginfold id='2'>
0280 color: black;
0281 <endfold id='2'>}</endfold id='2'>
0282 .my-other-mixin() <beginfold id='2'>{</beginfold id='2'>
0283 background: white;
0284 <endfold id='2'>}</endfold id='2'>
0285 .class <beginfold id='2'>{</beginfold id='2'>
0286 .my-mixin;
0287 .my-other-mixin;
0288 <endfold id='2'>}</endfold id='2'>
0289
0290 // Selectors in Mixins
0291
0292 .my-hover-mixin() <beginfold id='2'>{</beginfold id='2'>
0293 &:hover <beginfold id='2'>{</beginfold id='2'>
0294 border: 1px solid red;
0295 <endfold id='2'>}</endfold id='2'>
0296 <endfold id='2'>}</endfold id='2'>
0297 button <beginfold id='2'>{</beginfold id='2'>
0298 .my-hover-mixin();
0299 <endfold id='2'>}</endfold id='2'>
0300
0301 // Namespaces
0302
0303 #outer <beginfold id='2'>{</beginfold id='2'>
0304 .inner <beginfold id='2'>{</beginfold id='2'>
0305 color: red;
0306 <endfold id='2'>}</endfold id='2'>
0307 <endfold id='2'>}</endfold id='2'>
0308
0309 .c <beginfold id='2'>{</beginfold id='2'>
0310 #outer > .inner;
0311 <endfold id='2'>}</endfold id='2'>
0312
0313 .d <beginfold id='2'>{</beginfold id='2'>
0314 #outer > .inner;
0315 #outer > .inner();
0316 #outer .inner;
0317 #outer .inner();
0318 #outer.inner;
0319 #outer.inner();
0320 <endfold id='2'>}</endfold id='2'>
0321
0322 // Guarded Namespaces
0323
0324 #namespace when (@mode=huge) <beginfold id='2'>{</beginfold id='2'>
0325 .mixin() <beginfold id='2'>{</beginfold id='2'> <beginfold id='1'>/*</beginfold id='1'> <endfold id='1'>*/</endfold id='1'> <endfold id='2'>}</endfold id='2'>
0326 <endfold id='2'>}</endfold id='2'>
0327
0328 #namespace <beginfold id='2'>{</beginfold id='2'>
0329 .mixin() when (@mode=huge) <beginfold id='2'>{</beginfold id='2'> <beginfold id='1'>/*</beginfold id='1'> <endfold id='1'>*/</endfold id='1'> <endfold id='2'>}</endfold id='2'>
0330 <endfold id='2'>}</endfold id='2'>
0331
0332 #sp_1 when (default()) <beginfold id='2'>{</beginfold id='2'>
0333 #sp_2 when (default()) <beginfold id='2'>{</beginfold id='2'>
0334 .mixin() when not(default()) <beginfold id='2'>{</beginfold id='2'> <beginfold id='1'>/*</beginfold id='1'> <endfold id='1'>*/</endfold id='1'> <endfold id='2'>}</endfold id='2'>
0335 <endfold id='2'>}</endfold id='2'>
0336 <endfold id='2'>}</endfold id='2'>
0337
0338 // The !important keyword
0339
0340 .foo (@bg: #f5f5f5, @color: #900) <beginfold id='2'>{</beginfold id='2'>
0341 background: @bg;
0342 color: @color !important;
0343 <endfold id='2'>}</endfold id='2'>
0344 .unimportant <beginfold id='2'>{</beginfold id='2'>
0345 .foo();
0346 <endfold id='2'>}</endfold id='2'>
0347 .important <beginfold id='2'>{</beginfold id='2'>
0348 .foo() !important;
0349 <endfold id='2'>}</endfold id='2'>
0350
0351 // Parametric Mixins
0352
0353 .border-radius(@radius) <beginfold id='2'>{</beginfold id='2'>
0354 -webkit-border-radius: @radius;
0355 -moz-border-radius: @radius;
0356 border-radius: @radius;
0357 <endfold id='2'>}</endfold id='2'>
0358
0359 #header <beginfold id='2'>{</beginfold id='2'>
0360 .border-radius(4px);
0361 <endfold id='2'>}</endfold id='2'>
0362 .button <beginfold id='2'>{</beginfold id='2'>
0363 .border-radius(6px);
0364 <endfold id='2'>}</endfold id='2'>
0365
0366 .border-radius(@radius: 5px) <beginfold id='2'>{</beginfold id='2'>
0367 -webkit-border-radius: @radius;
0368 -moz-border-radius: @radius;
0369 border-radius: @radius;
0370 <endfold id='2'>}</endfold id='2'>
0371
0372 .wrap() <beginfold id='2'>{</beginfold id='2'>
0373 text-wrap: wrap;
0374 white-space: -moz-pre-wrap;
0375 white-space: pre-wrap;
0376 word-wrap: break-word;
0377 <endfold id='2'>}</endfold id='2'>
0378
0379 pre <beginfold id='2'>{</beginfold id='2'> .wrap <endfold id='2'>}</endfold id='2'>
0380
0381 // Mixins with Multiple Parameters
0382
0383 .mixin(@color) <beginfold id='2'>{</beginfold id='2'>
0384 color-1: @color;
0385 <endfold id='2'>}</endfold id='2'>
0386 .mixin(@color; @padding: 2) <beginfold id='2'>{</beginfold id='2'>
0387 color-2: @color;
0388 padding-2: @padding;
0389 <endfold id='2'>}</endfold id='2'>
0390 .mixin(@color; @padding; @margin: 2) <beginfold id='2'>{</beginfold id='2'>
0391 color-3: @color;
0392 padding-3: @padding;
0393 margin: @margin @margin @margin @margin;
0394 <endfold id='2'>}</endfold id='2'>
0395 .some .selector div <beginfold id='2'>{</beginfold id='2'>
0396 .mixin(#008000);
0397 <endfold id='2'>}</endfold id='2'>
0398
0399 // Named parameters
0400
0401 .mixin(@color: black; @margin: 10px; @padding: 20px) <beginfold id='2'>{</beginfold id='2'>
0402 color: @color;
0403 margin: @margin;
0404 padding: @padding;
0405 <endfold id='2'>}</endfold id='2'>
0406 .class1 <beginfold id='2'>{</beginfold id='2'>
0407 .mixin(@margin: 20px; @color: #33acfe);
0408 <endfold id='2'>}</endfold id='2'>
0409 .class2 <beginfold id='2'>{</beginfold id='2'>
0410 .mixin(#efca44; @padding: 40px);
0411 <endfold id='2'>}</endfold id='2'>
0412
0413 // The @arguments Variable
0414
0415 .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) <beginfold id='2'>{</beginfold id='2'>
0416 -webkit-box-shadow: @arguments;
0417 -moz-box-shadow: @arguments;
0418 box-shadow: @arguments;
0419 <endfold id='2'>}</endfold id='2'>
0420 .big-block <beginfold id='2'>{</beginfold id='2'>
0421 .box-shadow(2px; 5px);
0422 <endfold id='2'>}</endfold id='2'>
0423
0424 // Advanced Arguments and the @rest Variable
0425
0426 .mixin(...) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'> // matches 0-N arguments
0427 .mixin() <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'> // matches exactly 0 arguments
0428 .mixin(@a: 1) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'> // matches 0-1 arguments
0429 .mixin(@a: 1; ...) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'> // matches 0-N arguments
0430 .mixin(@a; ...) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'> // matches 1-N arguments
0431
0432 .mixin(@a; @rest...) <beginfold id='2'>{</beginfold id='2'>
0433 // @rest is bound to arguments after @a
0434 // @arguments is bound to all arguments
0435 <endfold id='2'>}</endfold id='2'>
0436
0437 // Pattern-matching
0438
0439 .mixin(@s; @color) <beginfold id='2'>{</beginfold id='2'> ... <endfold id='2'>}</endfold id='2'>
0440
0441 .class <beginfold id='2'>{</beginfold id='2'>
0442 .mixin(@switch; #888);
0443 <endfold id='2'>}</endfold id='2'>
0444
0445 .mixin(dark; @color) <beginfold id='2'>{</beginfold id='2'>
0446 color: darken(@color, 10%);
0447 <endfold id='2'>}</endfold id='2'>
0448 .mixin(light; @color) <beginfold id='2'>{</beginfold id='2'>
0449 color: lighten(@color, 10%);
0450 <endfold id='2'>}</endfold id='2'>
0451 .mixin(@_; @color) <beginfold id='2'>{</beginfold id='2'>
0452 display: block;
0453 <endfold id='2'>}</endfold id='2'>
0454
0455 @switch: light;
0456
0457 .class <beginfold id='2'>{</beginfold id='2'>
0458 .mixin(@switch; #888);
0459 <endfold id='2'>}</endfold id='2'>
0460
0461 // Mixins as Functions
0462
0463 .average(@x, @y) <beginfold id='2'>{</beginfold id='2'>
0464 @average: ((@x + @y) / 2);
0465 <endfold id='2'>}</endfold id='2'>
0466
0467 div <beginfold id='2'>{</beginfold id='2'>
0468 .average(16px, 50px); // "call" the mixin
0469 padding: @average; // use its "return" value
0470 <endfold id='2'>}</endfold id='2'>
0471
0472 // Passing Rulesets to Mixins
0473
0474 // declare detached ruleset
0475 @detached-ruleset: <beginfold id='2'>{</beginfold id='2'> background: red; <endfold id='2'>}</endfold id='2'>;
0476
0477 // use detached ruleset
0478 .top <beginfold id='2'>{</beginfold id='2'>
0479 @detached-ruleset();
0480 <endfold id='2'>}</endfold id='2'>
0481
0482 .desktop-and-old-ie(@rules) <beginfold id='2'>{</beginfold id='2'>
0483 @media screen and (min-width: 1200px) <beginfold id='2'>{</beginfold id='2'> @rules(); <endfold id='2'>}</endfold id='2'>
0484 html.lt-ie9 & <beginfold id='2'>{</beginfold id='2'> @rules(); <endfold id='2'>}</endfold id='2'>
0485 <endfold id='2'>}</endfold id='2'>
0486
0487 header <beginfold id='2'>{</beginfold id='2'>
0488 background-color: blue;
0489
0490 .desktop-and-old-ie({
0491 background-color: red;
0492 });
0493 <endfold id='2'>}</endfold id='2'>
0494
0495 @my-ruleset: <beginfold id='2'>{</beginfold id='2'>
0496 .my-selector <beginfold id='2'>{</beginfold id='2'>
0497 background-color: black;
0498 <endfold id='2'>}</endfold id='2'>
0499 <endfold id='2'>}</endfold id='2'>;
0500
0501 @my-ruleset: <beginfold id='2'>{</beginfold id='2'>
0502 .my-selector <beginfold id='2'>{</beginfold id='2'>
0503 @media tv <beginfold id='2'>{</beginfold id='2'>
0504 background-color: black;
0505 <endfold id='2'>}</endfold id='2'>
0506 <endfold id='2'>}</endfold id='2'>
0507 <endfold id='2'>}</endfold id='2'>;
0508 @media (orientation:portrait) <beginfold id='2'>{</beginfold id='2'>
0509 @my-ruleset();
0510 <endfold id='2'>}</endfold id='2'>
0511
0512 // Scoping
0513
0514 @detached-ruleset: <beginfold id='2'>{</beginfold id='2'>
0515 caller-variable: @caller-variable; // variable is undefined here
0516 .caller-mixin(); // mixin is undefined here
0517 <endfold id='2'>}</endfold id='2'>;
0518
0519 selector <beginfold id='2'>{</beginfold id='2'>
0520 // use detached ruleset
0521 @detached-ruleset();
0522
0523 // define variable and mixin needed inside the detached ruleset
0524 @caller-variable: value;
0525 .caller-mixin() <beginfold id='2'>{</beginfold id='2'>
0526 variable: declaration;
0527 <endfold id='2'>}</endfold id='2'>
0528 <endfold id='2'>}</endfold id='2'>
0529
0530 <beginfold id='1'>/*</beginfold id='1'>
0531 * reference: use a Less file but do not output it
0532 inline: include the source file in the output but do not process it
0533 less: treat the file as a Less file, no matter what the file extension
0534 css: treat the file as a CSS file, no matter what the file extension
0535 once: only include the file once (this is default behavior)
0536 multiple: include the file multiple times
0537 optional: continue compiling when file is not found
0538 <endfold id='1'>*/</endfold id='1'>
0539
0540 @import (optional, reference) "foo.less";
0541
0542 // Mixin Guards
0543
0544 .mixin (@a) when (lightness(@a) >= 50%) <beginfold id='2'>{</beginfold id='2'>
0545 background-color: black;
0546 <endfold id='2'>}</endfold id='2'>
0547 .mixin (@a) when (lightness(@a) < 50%) <beginfold id='2'>{</beginfold id='2'>
0548 background-color: white;
0549 <endfold id='2'>}</endfold id='2'>
0550 .mixin (@a) <beginfold id='2'>{</beginfold id='2'>
0551 color: @a;
0552 <endfold id='2'>}</endfold id='2'>
0553
0554 // Guard Comparison Operators
0555
0556 .truth (@a) when (@a) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0557 .truth (@a) when (@a = true) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0558
0559 // FIXME: @media as variable
0560 @media: mobile;
0561
0562 .mixin (@a) when (@media = mobile) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0563 .mixin (@a) when (@media = desktop) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0564
0565 .max (@a; @b) when (@a > @b) <beginfold id='2'>{</beginfold id='2'> width: @a <endfold id='2'>}</endfold id='2'>
0566 .max (@a; @b) when (@a < @b) <beginfold id='2'>{</beginfold id='2'> width: @b <endfold id='2'>}</endfold id='2'>
0567
0568 // Guard Logical Operators
0569
0570 .mixin (@a) when (isnumber(@a)) and (@a > 0) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0571 .mixin (@a) when (@a > 10), (@a < -10) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0572 .mixin (@b) when not (@b > 0) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0573
0574 // Type Checking Functions
0575
0576 .mixin (@a; @b: 0) when (isnumber(@b)) <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
0577 .mixin (@a; @b: black) when (iscolor(@b)) <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0578
0579 button when (@my-option = true) <beginfold id='2'>{</beginfold id='2'>
0580 color: white;
0581
0582 & when (@my-option = true) <beginfold id='2'>{</beginfold id='2'>
0583 button <beginfold id='2'>{</beginfold id='2'>
0584 color: white;
0585 <endfold id='2'>}</endfold id='2'>
0586 a <beginfold id='2'>{</beginfold id='2'>
0587 color: blue;
0588 <endfold id='2'>}</endfold id='2'>
0589 <endfold id='2'>}</endfold id='2'>
0590 <endfold id='2'>}</endfold id='2'>
0591
0592 // Loops
0593
0594 .loop(@counter) when (@counter > 0) <beginfold id='2'>{</beginfold id='2'>
0595 .loop((@counter - 1)); // next iteration
0596 width: (10px * @counter); // code for each iteration
0597 <endfold id='2'>}</endfold id='2'>
0598
0599 div <beginfold id='2'>{</beginfold id='2'>
0600 .loop(5); // launch the loop
0601 <endfold id='2'>}</endfold id='2'>
0602
0603 // Merge
0604
0605 .mixin() <beginfold id='2'>{</beginfold id='2'>
0606 box-shadow+: inset 0 0 10px #555;
0607 <endfold id='2'>}</endfold id='2'>
0608 .myclass <beginfold id='2'>{</beginfold id='2'>
0609 .mixin();
0610 box-shadow+: 0 0 20px black;
0611 <endfold id='2'>}</endfold id='2'>
0612
0613 // Space
0614
0615 .mixin() <beginfold id='2'>{</beginfold id='2'>
0616 transform+_: scale(2);
0617 <endfold id='2'>}</endfold id='2'>
0618 .myclass <beginfold id='2'>{</beginfold id='2'>
0619 .mixin();
0620 transform+_: rotate(15deg);
0621 <endfold id='2'>}</endfold id='2'>
0622
0623 // Parent Selectors
0624
0625 a <beginfold id='2'>{</beginfold id='2'>
0626 color: blue;
0627 &:hover <beginfold id='2'>{</beginfold id='2'>
0628 color: green;
0629 <endfold id='2'>}</endfold id='2'>
0630 <endfold id='2'>}</endfold id='2'>
0631
0632 .button <beginfold id='2'>{</beginfold id='2'>
0633 &-ok <beginfold id='2'>{</beginfold id='2'>
0634 background-image: url("ok.png");
0635 <endfold id='2'>}</endfold id='2'>
0636 &-cancel <beginfold id='2'>{</beginfold id='2'>
0637 background-image: url("cancel.png");
0638 <endfold id='2'>}</endfold id='2'>
0639
0640 &-custom <beginfold id='2'>{</beginfold id='2'>
0641 background-image: url("custom.png");
0642 <endfold id='2'>}</endfold id='2'>
0643 <endfold id='2'>}</endfold id='2'>
0644
0645 .link <beginfold id='2'>{</beginfold id='2'>
0646 & + & <beginfold id='2'>{</beginfold id='2'>
0647 color: red;
0648 <endfold id='2'>}</endfold id='2'>
0649
0650 & & <beginfold id='2'>{</beginfold id='2'>
0651 color: green;
0652 <endfold id='2'>}</endfold id='2'>
0653
0654 && <beginfold id='2'>{</beginfold id='2'>
0655 color: blue;
0656 <endfold id='2'>}</endfold id='2'>
0657
0658 &, &ish <beginfold id='2'>{</beginfold id='2'>
0659 color: cyan;
0660 <endfold id='2'>}</endfold id='2'>
0661 <endfold id='2'>}</endfold id='2'>
0662
0663 .grand <beginfold id='2'>{</beginfold id='2'>
0664 .parent <beginfold id='2'>{</beginfold id='2'>
0665 & > & <beginfold id='2'>{</beginfold id='2'>
0666 color: red;
0667 <endfold id='2'>}</endfold id='2'>
0668
0669 & & <beginfold id='2'>{</beginfold id='2'>
0670 color: green;
0671 <endfold id='2'>}</endfold id='2'>
0672
0673 && <beginfold id='2'>{</beginfold id='2'>
0674 color: blue;
0675 <endfold id='2'>}</endfold id='2'>
0676
0677 &, &ish <beginfold id='2'>{</beginfold id='2'>
0678 color: cyan;
0679 <endfold id='2'>}</endfold id='2'>
0680 <endfold id='2'>}</endfold id='2'>
0681 <endfold id='2'>}</endfold id='2'>
0682
0683 // Changing Selector Order
0684
0685 .header <beginfold id='2'>{</beginfold id='2'>
0686 .menu <beginfold id='2'>{</beginfold id='2'>
0687 border-radius: 5px;
0688 .no-borderradius & <beginfold id='2'>{</beginfold id='2'>
0689 background-image: url('images/button-background.png');
0690 <endfold id='2'>}</endfold id='2'>
0691 <endfold id='2'>}</endfold id='2'>
0692 <endfold id='2'>}</endfold id='2'>
0693
0694 // Combinatorial Explosion
0695
0696 p, a, ul, li <beginfold id='2'>{</beginfold id='2'>
0697 border-top: 2px dotted #366;
0698 & + & <beginfold id='2'>{</beginfold id='2'>
0699 border-top: 0;
0700 <endfold id='2'>}</endfold id='2'>
0701 <endfold id='2'>}</endfold id='2'>