highlight.less

/**
 * Less syntax highlighting test file
 *
 * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)
 *
 * @see http://lesscss.org/features/
 */
.mixin(@color; @padding; @margin: 2) {
 colorr: @color;
 padding-3: @padding;
 margin: @margin @margin @margin @margin;
}
@my-ruleset: {
 .my-selector {
 background-color: black;
 }
};
@bacon: red;
@beacon: background-color;
@baecon: @{w} + @w;
.noStar:extend(.class #sh:extend(#hhh) ) {}
.noStar:nth-child(w: red) {}
@media (max-width: @width2) and handheld {
 height: auto;
}
.test when (@color = blue) .ffff {color: red;}
.foo (@bg: #f5f5f5, @color: #900) {
 background: @bg;
 color: @color;
 .x {
 x: @nn;
 a: white @{nn@{ww}};
 background: red;
 }
}
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
a, .link {
 color: @link-color;
}
a:hover {
 color: @link-color-hover;
}
.widget {
 color: #fff;
 background: @link-color;
}
// Variable interpolation
@my-selector: banner;
.@{my-selector} when (@s = calc("s"); @{s} = calc("dddd")) {
 font-weight: bold;
 line-height+: 40px;
 margin: 0 auto;
}
@images: "../img";
body {
 color: #444;
 background: url("@{images}/white-sand.png");
}
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";
@property: color;
.widget {
 @{property}: #0ee;
 background-@{property}: #999;
}
// Variable names
@fnord: "I am fnord.";
@var: "fnord";
.variable-names-example {
 content: @@var;
}
// Lazy Evaluation
.lazy-eval {
 width: @var;
}
@var: @a;
@a: 9%;
@var: 0;
.class {
 @var: 1;
 .brass {
 @var: 2;
 three: @var;
 @var: 3;
 }
 one: @var;
}
// Default Variables
@base-color: green;
@dark-color: darken(@base-color, 10%);
@import "library.less";
@base-color: red;
// Extend
nav ul {
 &:extend(.inline);
 background: blue;
}
.inline {
 color: red;
}
// Extend Syntax
.e:extend(.f) {}
.e:extend(.g) {}
.e:extend(.f, .g) {}
// Extend Attached to Selector
.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
}
// Extend Inside Ruleset
pre:hover,
.some-class {
 &:extend(div pre);
}
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
// Extending Nested Selectors
.bucket {
 tr {
 color: blue;
 }
}
.some-class:extend(.bucket tr) {}
// Exact Matching with Extend
*.class {
 color: blue;
}
.noStar:extend(.class) {}
link:hover:visited {
 color: blue;
}
.selector:extend(link:visited:hover) {}
// nth Expression
:nth-child(1n+3) {
 color: blue;
}
.child:extend(:nth-child(n+3)) {}
[title=identifier] {
 color: blue;
}
[title='identifier'] {
 color: blue;
}
[title="identifier"] {
 color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
// Extend "all"
.a.b.test,
.test.c {
 color: orange;
}
.test {
 &:hover {
 color: green;
 }
}
.replacement:extend(.test all) {}
// Selector Interpolation with Extend
.bucket {
 color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
// Scoping / Extend Inside @media
@media print {
 .screenClass:extend(.selector) {}
 .selector {
 color: black;
 }
}
.selector {
 color: red;
}
@media screen {
 .selector {
 color: blue;
 }
}
// Use Cases for Extend
.animal {
 background-color: black;
 color: white;
}
.bear {
 &:extend(.animal);
 background-color: brown;
}
.my-inline-block {
 display: inline-block;
 font-size: 0;
}
.thing1 {
 &:extend(.my-inline-block);
}
.thing2 {
 &:extend(.my-inline-block);
}
// Mixins
.a, #b {
 color: red;
}
.mixin-class {
 .a();
}
.mixin-id {
 #b();
}
// Not Outputting the Mixin
.my-mixin {
 color: black;
}
.my-other-mixin() {
 background: white;
}
.class {
 .my-mixin;
 .my-other-mixin;
}
// Selectors in Mixins
.my-hover-mixin() {
 &:hover {
 border: 1px solid red;
 }
}
button {
 .my-hover-mixin();
}
// Namespaces
#outer {
 .inner {
 color: red;
 }
}
.c {
 #outer> .inner;
}
.d {
 #outer> .inner;
 #outer> .inner();
 #outer .inner;
 #outer .inner();
 #outer.inner;
 #outer.inner();
}
// Guarded Namespaces
#namespace when (@mode=huge) {
 .mixin() { /* */ }
}
#namespace {
 .mixin() when (@mode=huge) { /* */ }
}
#sp_1 when (default()) {
 #sp_2 when (default()) {
 .mixin() when not(default()) { /* */ }
 }
}
// The !important keyword
.foo (@bg: #f5f5f5, @color: #900) {
 background: @bg;
 color: @color !important;
}
.unimportant {
 .foo();
}
.important {
 .foo() !important;
}
// Parametric Mixins
.border-radius(@radius) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}
#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px);
}
.border-radius(@radius: 5px) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}
.wrap() {
 text-wrap: wrap;
 white-space: -moz-pre-wrap;
 white-space: pre-wrap;
 word-wrap: break-word;
}
pre { .wrap }
// Mixins with Multiple Parameters
.mixin(@color) {
 color-1: @color;
}
.mixin(@color; @padding: 2) {
 color-2: @color;
 padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
 color-3: @color;
 padding-3: @padding;
 margin: @margin @margin @margin @margin;
}
.some .selector div {
 .mixin(#008000);
}
// Named parameters
.mixin(@color: black; @margin: 10px; @padding: 20px) {
 color: @color;
 margin: @margin;
 padding: @padding;
}
.class1 {
 .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
 .mixin(#efca44; @padding: 40px);
}
// The @arguments Variable
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
 -webkit-box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 box-shadow: @arguments;
}
.big-block {
 .box-shadow(2px; 5px);
}
// Advanced Arguments and the @rest Variable
.mixin(...) {} // matches 0-N arguments
.mixin() {} // matches exactly 0 arguments
.mixin(@a: 1) {} // matches 0-1 arguments
.mixin(@a: 1; ...) {} // matches 0-N arguments
.mixin(@a; ...) {} // matches 1-N arguments
.mixin(@a; @rest...) {
 // @rest is bound to arguments after @a
 // @arguments is bound to all arguments
}
// Pattern-matching
.mixin(@s; @color) { ... }
.class {
 .mixin(@switch; #888);
}
.mixin(dark; @color) {
 color: darken(@color, 10%);
}
.mixin(light; @color) {
 color: lighten(@color, 10%);
}
.mixin(@_; @color) {
 display: block;
}
@switch: light;
.class {
 .mixin(@switch; #888);
}
// Mixins as Functions
.average(@x, @y) {
 @average: ((@x + @y) / 2);
}
div {
 .average(16px, 50px); // "call" the mixin
 padding: @average; // use its "return" value
}
// Passing Rulesets to Mixins
// declare detached ruleset
@detached-ruleset: { background: red; };
// use detached ruleset
.top {
 @detached-ruleset();
}
.desktop-and-old-ie(@rules) {
 @media screen and (min-width: 1200px) { @rules(); }
 html.lt-ie9 & { @rules(); }
}
header {
 background-color: blue;
 .desktop-and-old-ie({
 background-color: red;
 });
}
@my-ruleset: {
 .my-selector {
 background-color: black;
 }
};
@my-ruleset: {
 .my-selector {
 @media tv {
 background-color: black;
 }
 }
 };
@media (orientation:portrait) {
 @my-ruleset();
}
// Scoping
@detached-ruleset: {
 caller-variable: @caller-variable; // variable is undefined here
 .caller-mixin(); // mixin is undefined here
};
selector {
 // use detached ruleset
 @detached-ruleset();
 // define variable and mixin needed inside the detached ruleset
 @caller-variable: value;
 .caller-mixin() {
 variable: declaration;
 }
}
/*
 * reference: use a Less file but do not output it
inline: include the source file in the output but do not process it
less: treat the file as a Less file, no matter what the file extension
css: treat the file as a CSS file, no matter what the file extension
once: only include the file once (this is default behavior)
multiple: include the file multiple times
optional: continue compiling when file is not found
 */
@import (optional, reference) "foo.less";
// Mixin Guards
.mixin (@a) when (lightness(@a)>= 50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}
// Guard Comparison Operators
.truth (@a) when (@a) { }
.truth (@a) when (@a = true) { }
// FIXME: @media as variable
@media: mobile;
.mixin (@a) when (@media = mobile) { }
.mixin (@a) when (@media = desktop) { }
.max (@a; @b) when (@a> @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
// Guard Logical Operators
.mixin (@a) when (isnumber(@a)) and (@a> 0) { }
.mixin (@a) when (@a> 10), (@a < -10) { }
.mixin (@b) when not (@b> 0) { }
// Type Checking Functions
.mixin (@a; @b: 0) when (isnumber(@b)) { }
.mixin (@a; @b: black) when (iscolor(@b)) {}
button when (@my-option = true) {
 color: white;
 & when (@my-option = true) {
 button {
 color: white;
 }
 a {
 color: blue;
 }
}
}
// Loops
.loop(@counter) when (@counter> 0) {
 .loop((@counter - 1)); // next iteration
 width: (10px * @counter); // code for each iteration
}
div {
 .loop(5); // launch the loop
}
// Merge
.mixin() {
 box-shadow+: inset 0 0 10px #555;
}
.myclass {
 .mixin();
 box-shadow+: 0 0 20px black;
}
// Space
.mixin() {
 transform+_: scale(2);
}
.myclass {
 .mixin();
 transform+_: rotate(15deg);
}
// Parent Selectors
a {
 color: blue;
 &:hover {
 color: green;
 }
}
.button {
 &-ok {
 background-image: url("ok.png");
 }
 &-cancel {
 background-image: url("cancel.png");
 }
 &-custom {
 background-image: url("custom.png");
 }
}
.link {
 & + & {
 color: red;
 }
 & & {
 color: green;
 }
 && {
 color: blue;
 }
 &, &ish {
 color: cyan;
 }
}
.grand {
 .parent {
 &> & {
 color: red;
 }
 & & {
 color: green;
 }
 && {
 color: blue;
 }
 &, &ish {
 color: cyan;
 }
 }
}
// Changing Selector Order
.header {
 .menu {
 border-radius: 5px;
 .no-borderradius & {
 background-image: url('images/button-background.png');
 }
 }
}
// Combinatorial Explosion
p, a, ul, li {
 border-top: 2px dotted #366;
 & + & {
 border-top: 0;
 }
}