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