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'>