diff --git a/autotests/html/highlight.less.html b/autotests/html/highlight.less.html
--- a/autotests/html/highlight.less.html
+++ b/autotests/html/highlight.less.html
@@ -20,98 +20,98 @@
@my-ruleset: {
.my-selector {
- background-color: black;
+ background-color: black;
}
};
-@bacon: red;
+@bacon: red;
@beacon: background-color;
@baecon: @{w} + @w;
.noStar:extend(.class #sh:extend(#hhh) ) {}
-.noStar:nth-child(w: red) {}
+.noStar:nth-child(w: red) {}
@media (max-width: @width2) and handheld {
- height: auto;
+ height: auto;
}
-.test when (@color = blue) .ffff {color: red;}
+.test when (@color = blue) .ffff {color: red;}
-.foo (@bg: #f5f5f5, @color: #900) {
+.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
.x {
x: @nn;
- a: white @{nn@{ww}};
- background: red;
+ a: white @{nn@{ww}};
+ background: red;
}
}
// Variables
-@link-color: #428bca; // sea blue
-@link-color-hover: darken(@link-color, 10%);
+@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;
+ 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;
+ line-height+: 40px;
+ margin: 0 auto;
}
@images: "../img";
body {
- color: #444;
+ color: #444;
background: url("@{images}/white-sand.png");
}
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";
@property: color;
.widget {
- @{property}: #0ee;
- background-@{property}: #999;
+ @{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%;
+@a: 9%;
@var: 0;
.class {
@var: 1;
@@ -125,138 +125,138 @@
// Default Variables
-@base-color: green;
-@dark-color: darken(@base-color, 10%);
+@base-color: green;
+@dark-color: darken(@base-color, 10%);
@import "library.less";
-@base-color: red;
+@base-color: red;
// Extend
nav ul {
&:extend(.inline);
- background: blue;
+ background: blue;
}
.inline {
- color: red;
+ 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;
+ color: blue;
}
}
.some-class:extend(.bucket tr) {}
// Exact Matching with Extend
*.class {
- color: blue;
+ color: blue;
}
.noStar:extend(.class) {}
link:hover:visited {
- color: blue;
+ color: blue;
}
.selector:extend(link:visited:hover) {}
// nth Expression
:nth-child(1n+3) {
- color: blue;
+ color: blue;
}
.child:extend(:nth-child(n+3)) {}
[title=identifier] {
- color: blue;
+ color: blue;
}
[title='identifier'] {
- color: blue;
+ color: blue;
}
[title="identifier"] {
- color: blue;
+ color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
// Extend "all"
.a.b.test,
.test.c {
- color: orange;
+ color: orange;
}
.test {
&:hover {
- color: green;
+ color: green;
}
}
.replacement:extend(.test all) {}
// Selector Interpolation with Extend
.bucket {
- color: blue;
+ color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
// Scoping / Extend Inside @media
@media print {
.screenClass:extend(.selector) {}
.selector {
- color: black;
+ color: black;
}
}
.selector {
- color: red;
+ color: red;
}
@media screen {
.selector {
- color: blue;
+ color: blue;
}
}
// Use Cases for Extend
.animal {
- background-color: black;
- color: white;
+ background-color: black;
+ color: white;
}
.bear {
&:extend(.animal);
- background-color: brown;
+ background-color: brown;
}
.my-inline-block {
display: inline-block;
font-size: 0;
@@ -271,79 +271,79 @@
// Mixins
.a, #b {
- color: red;
+ color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
// Not Outputting the Mixin
.my-mixin {
- color: black;
+ color: black;
}
.my-other-mixin() {
- background: white;
+ background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
// Selectors in Mixins
.my-hover-mixin() {
&:hover {
- border: 1px solid red;
+ border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
// Namespaces
#outer {
.inner {
- color: red;
+ 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) {
+.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color !important;
}
@@ -363,29 +363,29 @@
}
#header {
- .border-radius(4px);
+ .border-radius(4px);
}
.button {
- .border-radius(6px);
+ .border-radius(6px);
}
-.border-radius(@radius: 5px) {
+.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;
}
@@ -399,140 +399,140 @@
margin: @margin @margin @margin @margin;
}
.some .selector div {
- .mixin(#008000);
+ .mixin(#008000);
}
// Named parameters
-.mixin(@color: black; @margin: 10px; @padding: 20px) {
+.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
- .mixin(@margin: 20px; @color: #33acfe);
+ .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
- .mixin(#efca44; @padding: 40px);
+ .mixin(#efca44; @padding: 40px);
}
// The @arguments Variable
-.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
+.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);
+ .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(@switch; #888);
}
.mixin(dark; @color) {
- color: darken(@color, 10%);
+ color: darken(@color, 10%);
}
.mixin(light; @color) {
- color: lighten(@color, 10%);
+ color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
@switch: light;
.class {
- .mixin(@switch; #888);
+ .mixin(@switch; #888);
}
// Mixins as Functions
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
- .average(16px, 50px); // "call" the mixin
+ .average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
// Passing Rulesets to Mixins
// declare detached ruleset
-@detached-ruleset: { background: red; };
+@detached-ruleset: { background: red; };
// use detached ruleset
.top {
@detached-ruleset();
}
.desktop-and-old-ie(@rules) {
- @media screen and (min-width: 1200px) { @rules(); }
+ @media screen and (min-width: 1200px) { @rules(); }
html.lt-ie9 & { @rules(); }
}
header {
- background-color: blue;
+ background-color: blue;
.desktop-and-old-ie({
- background-color: red;
+ background-color: red;
});
}
@my-ruleset: {
.my-selector {
- background-color: black;
+ background-color: black;
}
};
@my-ruleset: {
.my-selector {
@media tv {
- background-color: black;
+ 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
@@ -547,160 +547,160 @@
// Mixin Guards
-.mixin (@a) when (lightness(@a) >= 50%) {
- background-color: black;
+.mixin (@a) when (lightness(@a) >= 50%) {
+ background-color: black;
}
-.mixin (@a) when (lightness(@a) < 50%) {
- background-color: white;
+.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)) {}
+.mixin (@a; @b: black) when (iscolor(@b)) {}
button when (@my-option = true) {
- color: white;
+ color: white;
& when (@my-option = true) {
button {
- color: white;
+ color: white;
}
a {
- color: blue;
+ color: blue;
}
}
}
// Loops
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
- width: (10px * @counter); // code for each iteration
+ width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
// Merge
.mixin() {
- box-shadow+: inset 0 0 10px #555;
+ box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
- box-shadow+: 0 0 20px black;
+ box-shadow+: 0 0 20px black;
}
// Space
.mixin() {
- transform+_: scale(2);
+ transform+_: scale(2);
}
.myclass {
.mixin();
- transform+_: rotate(15deg);
+ transform+_: rotate(15deg);
}
// Parent Selectors
a {
- color: blue;
+ color: blue;
&:hover {
- color: green;
+ 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: red;
}
& & {
- color: green;
+ color: green;
}
&& {
- color: blue;
+ color: blue;
}
&, &ish {
- color: cyan;
+ color: cyan;
}
}
.grand {
.parent {
& > & {
- color: red;
+ color: red;
}
& & {
- color: green;
+ color: green;
}
&& {
- color: blue;
+ color: blue;
}
&, &ish {
- color: cyan;
+ color: cyan;
}
}
}
// Changing Selector Order
.header {
.menu {
- border-radius: 5px;
+ 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: 2px dotted #366;
& + & {
border-top: 0;
}
diff --git a/autotests/reference/highlight.less.ref b/autotests/reference/highlight.less.ref
--- a/autotests/reference/highlight.less.ref
+++ b/autotests/reference/highlight.less.ref
@@ -6,46 +6,46 @@
* @see http://lesscss.org/features/
*/
-.mixin(@color; @padding; @margin: 2) {
+.mixin(@color; @padding; @margin: 2) {
colorr: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
@my-ruleset: {
.my-selector {
- background-color: black;
+ background-color: black;
}
};
-@bacon: red;
+@bacon: red;
@beacon: background-color;
@baecon: @{w} + @w;
.noStar:extend(.class #sh:extend(#hhh) ) {}
-.noStar:nth-child(w: red) {}
+.noStar:nth-child(w: red) {}
@media (max-width: @width2) and handheld {
- height: auto;
+ height: auto;
}
-.test when (@color = blue) .ffff {color: red;}
+.test when (@color = blue) .ffff {color: red;}
-.foo (@bg: #f5f5f5, @color: #900) {
+.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
.x {
x: @nn;
- a: white @{nn@{ww}};
- background: red;
+ a: white @{nn@{ww}};
+ background: red;
}
}
// Variables
-@link-color: #428bca; // sea blue
-@link-color-hover: darken(@link-color, 10%);
+@link-color: #428bca; // sea blue
+@link-color-hover: darken(@link-color, 10%);
a, .link {
color: @link-color;
@@ -56,7 +56,7 @@
}
.widget {
- color: #fff;
+ color: #fff;
background: @link-color;
}
@@ -66,14 +66,14 @@
.@{my-selector} when (@s = calc("s"); @{s} = calc("dddd")) {
font-weight: bold;
- line-height+: 40px;
- margin: 0 auto;
+ line-height+: 40px;
+ margin: 0 auto;
}
@images: "../img";
body {
- color: #444;
+ color: #444;
background: url("@{images}/white-sand.png");
}
@@ -84,8 +84,8 @@
@property: color;
.widget {
- @{property}: #0ee;
- background-@{property}: #999;
+ @{property}: #0ee;
+ background-@{property}: #999;
}
// Variable names
@@ -104,35 +104,35 @@
}
@var: @a;
-@a: 9%;
+@a: 9%;
-@var: 0;
+@var: 0;
.class {
- @var: 1;
+ @var: 1;
.brass {
- @var: 2;
+ @var: 2;
three: @var;
- @var: 3;
+ @var: 3;
}
one: @var;
}
// Default Variables
-@base-color: green;
-@dark-color: darken(@base-color, 10%);
+@base-color: green;
+@dark-color: darken(@base-color, 10%);
@import "library.less";
-@base-color: red;
+@base-color: red;
// Extend
nav ul {
&:extend(.inline);
- background: blue;
+ background: blue;
}
.inline {
- color: red;
+ color: red;
}
// Extend Syntax
@@ -163,38 +163,38 @@
.bucket {
tr {
- color: blue;
+ color: blue;
}
}
.some-class:extend(.bucket tr) {}
// Exact Matching with Extend
*.class {
- color: blue;
+ color: blue;
}
.noStar:extend(.class) {}
link:hover:visited {
- color: blue;
+ color: blue;
}
.selector:extend(link:visited:hover) {}
// nth Expression
-:nth-child(1n+3) {
- color: blue;
+:nth-child(1n+3) {
+ color: blue;
}
.child:extend(:nth-child(n+3)) {}
[title=identifier] {
- color: blue;
+ color: blue;
}
[title='identifier'] {
- color: blue;
+ color: blue;
}
[title="identifier"] {
- color: blue;
+ color: blue;
}
.noQuote:extend([title=identifier]) {}
@@ -205,20 +205,20 @@
.a.b.test,
.test.c {
- color: orange;
+ color: orange;
}
.test {
&:hover {
- color: green;
+ color: green;
}
}
.replacement:extend(.test all) {}
// Selector Interpolation with Extend
.bucket {
- color: blue;
+ color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
@@ -228,32 +228,32 @@
@media print {
.screenClass:extend(.selector) {}
.selector {
- color: black;
+ color: black;
}
}
.selector {
- color: red;
+ color: red;
}
@media screen {
.selector {
- color: blue;
+ color: blue;
}
}
// Use Cases for Extend
.animal {
- background-color: black;
- color: white;
+ background-color: black;
+ color: white;
}
.bear {
&:extend(.animal);
- background-color: brown;
+ background-color: brown;
}
.my-inline-block {
display: inline-block;
- font-size: 0;
+ font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
@@ -265,7 +265,7 @@
// Mixins
.a, #b {
- color: red;
+ color: red;
}
.mixin-class {
.a();
@@ -277,10 +277,10 @@
// Not Outputting the Mixin
.my-mixin {
- color: black;
+ color: black;
}
.my-other-mixin() {
- background: white;
+ background: white;
}
.class {
.my-mixin;
@@ -291,7 +291,7 @@
.my-hover-mixin() {
&:hover {
- border: 1px solid red;
+ border: 1px solid red;
}
}
button {
@@ -302,7 +302,7 @@
#outer {
.inner {
- color: red;
+ color: red;
}
}
@@ -337,7 +337,7 @@
// The !important keyword
-.foo (@bg: #f5f5f5, @color: #900) {
+.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color !important;
}
@@ -357,13 +357,13 @@
}
#header {
- .border-radius(4px);
+ .border-radius(4px);
}
.button {
- .border-radius(6px);
+ .border-radius(6px);
}
-.border-radius(@radius: 5px) {
+.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
@@ -383,50 +383,50 @@
.mixin(@color) {
color-1: @color;
}
-.mixin(@color; @padding: 2) {
+.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
-.mixin(@color; @padding; @margin: 2) {
+.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
- .mixin(#008000);
+ .mixin(#008000);
}
// Named parameters
-.mixin(@color: black; @margin: 10px; @padding: 20px) {
+.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
- .mixin(@margin: 20px; @color: #33acfe);
+ .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
- .mixin(#efca44; @padding: 40px);
+ .mixin(#efca44; @padding: 40px);
}
// The @arguments Variable
-.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
+.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);
+ .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: 1) {} // matches 0-1 arguments
+.mixin(@a: 1; ...) {} // matches 0-N arguments
.mixin(@a; ...) {} // matches 1-N arguments
.mixin(@a; @rest...) {
@@ -439,69 +439,69 @@
.mixin(@s; @color) { ... }
.class {
- .mixin(@switch; #888);
+ .mixin(@switch; #888);
}
.mixin(dark; @color) {
- color: darken(@color, 10%);
+ color: darken(@color, 10%);
}
.mixin(light; @color) {
- color: lighten(@color, 10%);
+ color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
@switch: light;
.class {
- .mixin(@switch; #888);
+ .mixin(@switch; #888);
}
// Mixins as Functions
.average(@x, @y) {
- @average: ((@x + @y) / 2);
+ @average: ((@x + @y) / 2);
}
div {
- .average(16px, 50px); // "call" the mixin
+ .average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
// Passing Rulesets to Mixins
// declare detached ruleset
-@detached-ruleset: { background: red; };
+@detached-ruleset: { background: red; };
// use detached ruleset
.top {
@detached-ruleset();
}
.desktop-and-old-ie(@rules) {
- @media screen and (min-width: 1200px) { @rules(); }
+ @media screen and (min-width: 1200px) { @rules(); }
html.lt-ie9 & { @rules(); }
}
header {
- background-color: blue;
+ background-color: blue;
.desktop-and-old-ie({
- background-color: red;
+ background-color: red;
});
}
@my-ruleset: {
.my-selector {
- background-color: black;
+ background-color: black;
}
};
@my-ruleset: {
.my-selector {
@media tv {
- background-color: black;
+ background-color: black;
}
}
};
@@ -541,11 +541,11 @@
// Mixin Guards
-.mixin (@a) when (lightness(@a) >= 50%) {
- background-color: black;
+.mixin (@a) when (lightness(@a) >= 50%) {
+ background-color: black;
}
-.mixin (@a) when (lightness(@a) < 50%) {
- background-color: white;
+.mixin (@a) when (lightness(@a) < 50%) {
+ background-color: white;
}
.mixin (@a) {
color: @a;
@@ -567,65 +567,65 @@
// Guard Logical Operators
-.mixin (@a) when (isnumber(@a)) and (@a > 0) { }
-.mixin (@a) when (@a > 10), (@a < -10) { }
-.mixin (@b) when not (@b > 0) { }
+.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)) {}
+.mixin (@a; @b: 0) when (isnumber(@b)) { }
+.mixin (@a; @b: black) when (iscolor(@b)) {}
button when (@my-option = true) {
- color: white;
+ color: white;
& when (@my-option = true) {
button {
- color: white;
+ color: white;
}
a {
- color: blue;
+ color: blue;
}
}
}
// Loops
-.loop(@counter) when (@counter > 0) {
- .loop((@counter - 1)); // next iteration
- width: (10px * @counter); // code for each iteration
+.loop(@counter) when (@counter > 0) {
+ .loop((@counter - 1)); // next iteration
+ width: (10px * @counter); // code for each iteration
}
div {
- .loop(5); // launch the loop
+ .loop(5); // launch the loop
}
// Merge
.mixin() {
- box-shadow+: inset 0 0 10px #555;
+ box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
- box-shadow+: 0 0 20px black;
+ box-shadow+: 0 0 20px black;
}
// Space
.mixin() {
- transform+_: scale(2);
+ transform+_: scale(2);
}
.myclass {
.mixin();
- transform+_: rotate(15deg);
+ transform+_: rotate(15deg);
}
// Parent Selectors
a {
- color: blue;
+ color: blue;
&:hover {
- color: green;
+ color: green;
}
}
@@ -644,47 +644,47 @@
.link {
& + & {
- color: red;
+ color: red;
}
& & {
- color: green;
+ color: green;
}
&& {
- color: blue;
+ color: blue;
}
&, &ish {
- color: cyan;
+ color: cyan;
}
}
.grand {
.parent {
& > & {
- color: red;
+ color: red;
}
& & {
- color: green;
+ color: green;
}
&& {
- color: blue;
+ color: blue;
}
&, &ish {
- color: cyan;
+ color: cyan;
}
}
}
// Changing Selector Order
.header {
.menu {
- border-radius: 5px;
+ border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
@@ -694,8 +694,8 @@
// Combinatorial Explosion
p, a, ul, li {
- border-top: 2px dotted #366;
+ border-top: 2px dotted #366;
& + & {
- border-top: 0;
+ border-top: 0;
}
}
diff --git a/data/syntax/less.xml b/data/syntax/less.xml
--- a/data/syntax/less.xml
+++ b/data/syntax/less.xml
@@ -5,1026 +5,37 @@
]>
-
-
- - align-content
- - align-items
- - align-self
- - alignment-baseline
- - all
- - animation
- - animation-delay
- - animation-direction
- - animation-duration
- - animation-fill-mode
- - animation-iteration-count
- - animation-name
- - animation-play-state
- - animation-timing-function
- - appearance
- - azimuth
- - backface-visibility
- - background
- - background-attachment
- - background-blend-mode
- - background-break
- - background-clip
- - background-color
- - background-image
- - background-origin
- - background-position
- - background-repeat
- - background-size
- - baseline-shift
- - block-step
- - block-step-align
- - block-step-insert
- - block-step-round
- - block-step-size
- - bookmark-label
- - bookmark-level
- - bookmark-state
- - border
- - border-bottom
- - border-bottom-color
- - border-bottom-image
- - border-bottom-left-image
- - border-bottom-left-radius
- - border-bottom-right-image
- - border-bottom-right-radius
- - border-bottom-style
- - border-bottom-width
- - border-boundary
- - border-collapse
- - border-color
- - border-corner-image
- - border-image
- - border-image-outset
- - border-image-repeat
- - border-image-slice
- - border-image-source
- - border-image-width
- - border-left
- - border-left-color
- - border-left-image
- - border-left-style
- - border-left-width
- - border-radius
- - border-right
- - border-right-color
- - border-right-image
- - border-right-style
- - border-right-width
- - border-spacing
- - border-style
- - border-top
- - border-top-color
- - border-top-image
- - border-top-left-image
- - border-top-left-radius
- - border-top-right-image
- - border-top-right-radius
- - border-top-style
- - border-top-width
- - border-width
- - bottom
- - box-align
- - box-decoration-break
- - box-direction
- - box-flex
- - box-shadow
- - box-sizing
- - box-snap
- - box-suppress
- - break-after
- - break-before
- - break-inside
- - caption-side
- - caret
- - caret-animation
- - caret-color
- - caret-shape
- - chains
- - clear
- - clip
- - clip-path
- - clip-rule
- - color
- - color-adjust
- - color-interpolation-filters
- - column-count
- - column-fill
- - column-gap
- - column-rule
- - column-rule-color
- - column-rule-style
- - column-rule-width
- - column-span
- - column-width
- - columns
- - contain
- - content
- - counter-increment
- - counter-reset
- - counter-set
- - cue
- - cue-after
- - cue-before
- - cursor
- - direction
- - display
- - dominant-baseline
- - elevation
- - empty-cells
- - fill
- - fill-break
- - fill-color
- - fill-image
- - fill-opacity
- - fill-origin
- - fill-position
- - fill-repeat
- - fill-rule
- - fill-size
- - filter
- - flex
- - flex-basis
- - flex-direction
- - flex-flow
- - flex-grow
- - flex-shrink
- - flex-wrap
- - float
- - float-defer
- - float-offset
- - float-reference
- - flood-color
- - flood-opacity
- - flow
- - flow-from
- - flow-into
- - font
- - font-family
- - font-feature-settings
- - font-kerning
- - font-language-override
- - font-size
- - font-size-adjust
- - font-stretch
- - font-style
- - font-synthesis
- - font-variant
- - font-variant-alternates
- - font-variant-caps
- - font-variant-east-asian
- - font-variant-ligatures
- - font-variant-numeric
- - font-variant-position
- - font-weight
- - footnote-display
- - footnote-policy
- - glyph-orientation-vertical
- - grid
- - grid-area
- - grid-auto-columns
- - grid-auto-flow
- - grid-auto-rows
- - grid-column
- - grid-column-end
- - grid-column-gap
- - grid-column-start
- - grid-gap
- - grid-row
- - grid-row-end
- - grid-row-gap
- - grid-row-start
- - grid-template
- - grid-template-areas
- - grid-template-columns
- - grid-template-rows
- - hanging-punctuation
- - height
- - hyphenate-character
- - hyphenate-limit-chars
- - hyphenate-limit-last
- - hyphenate-limit-lines
- - hyphenate-limit-zone
- - hyphens
- - image-orientation
- - image-rendering
- - image-resolution
- - initial-letter
- - initial-letter-align
- - initial-letter-wrap
- - isolation
- - justify-content
- - justify-items
- - justify-self
- - left
- - letter-spacing
- - lighting-color
- - line-break
- - line-grid
- - line-height
- - line-height-step
- - line-snap
- - linear-gradient
- - list-style
- - list-style-image
- - list-style-keyword
- - list-style-position
- - list-style-type
- - margin
- - margin-bottom
- - margin-left
- - margin-right
- - margin-top
- - marker
- - marker-end
- - marker-knockout-left
- - marker-knockout-right
- - marker-mid
- - marker-offset
- - marker-pattern
- - marker-segment
- - marker-side
- - marker-start
- - marquee-direction
- - marquee-loop
- - marquee-speed
- - marquee-style
- - mask
- - mask-border
- - mask-border-mode
- - mask-border-outset
- - mask-border-repeat
- - mask-border-slice
- - mask-border-source
- - mask-border-width
- - mask-clip
- - mask-composite
- - mask-image
- - mask-mode
- - mask-origin
- - mask-position
- - mask-repeat
- - mask-size
- - mask-type
- - max-height
- - max-lines
- - max-width
- - min-height
- - min-width
- - mix-blend-mode
- - motion
- - motion-offset
- - motion-path
- - motion-rotation
- - nav-down
- - nav-left
- - nav-right
- - nav-up
- - object-fit
- - object-position
- - offset-after
- - offset-before
- - offset-end
- - offset-start
- - opacity
- - order
- - orphans
- - outline
- - outline-color
- - outline-offset
- - outline-style
- - outline-width
- - overflow
- - overflow-style
- - overflow-wrap
- - overflow-x
- - overflow-y
- - padding
- - padding-bottom
- - padding-left
- - padding-right
- - padding-top
- - page
- - page-break-after
- - page-break-before
- - page-break-inside
- - pause
- - pause-after
- - pause-before
- - perspective
- - perspective-origin
- - pitch
- - pitch-range
- - place-content
- - place-items
- - place-self
- - play-during
- - pointer-events
- - polar-anchor
- - polar-angle
- - polar-distance
- - polar-origin
- - position
- - presentation-level
- - quotes
- - region-fragment
- - resize
- - rest
- - rest-after
- - rest-before
- - richness
- - right
- - rotation
- - rotation-point
- - ruby-align
- - ruby-merge
- - ruby-position
- - running
- - scroll-behavior
- - scroll-padding
- - scroll-padding-block
- - scroll-padding-block-end
- - scroll-padding-block-start
- - scroll-padding-bottom
- - scroll-padding-inline
- - scroll-padding-inline-end
- - scroll-padding-inline-start
- - scroll-padding-left
- - scroll-padding-right
- - scroll-padding-top
- - scroll-snap-align
- - scroll-snap-margin
- - scroll-snap-margin-block
- - scroll-snap-margin-block-end
- - scroll-snap-margin-block-start
- - scroll-snap-margin-bottom
- - scroll-snap-margin-inline
- - scroll-snap-margin-inline-end
- - scroll-snap-margin-inline-start
- - scroll-snap-margin-left
- - scroll-snap-margin-right
- - scroll-snap-margin-top
- - scroll-snap-stop
- - scroll-snap-type
- - shape-image-threshold
- - shape-inside
- - shape-margin
- - shape-outside
- - size
- - speak
- - speak-as
- - speak-header
- - speak-numeral
- - speak-punctuation
- - speech-rate
- - stress
- - string-set
- - stroke
- - stroke-align
- - stroke-alignment
- - stroke-break
- - stroke-color
- - stroke-dash-corner
- - stroke-dash-justify
- - stroke-dashadjust
- - stroke-dasharray
- - stroke-dashcorner
- - stroke-dashoffset
- - stroke-image
- - stroke-linecap
- - stroke-linejoin
- - stroke-miterlimit
- - stroke-opacity
- - stroke-origin
- - stroke-position
- - stroke-repeat
- - stroke-size
- - stroke-width
- - tab-size
- - table-layout
- - text-align
- - text-align-last
- - text-combine-upright
- - text-decoration
- - text-decoration-color
- - text-decoration-line
- - text-decoration-skip
- - text-decoration-style
- - text-emphasis
- - text-emphasis-color
- - text-emphasis-position
- - text-emphasis-style
- - text-indent
- - text-justify
- - text-orientation
- - text-overflow
- - text-shadow
- - test-space-collapse
- - test-space-trim
- - test-spacing
- - text-transform
- - text-underline-position
- - text-wrap
- - top
- - transform
- - transform-origin
- - transform-style
- - transition
- - transition-delay
- - transition-duration
- - transition-property
- - transition-timing-function
- - unicode-bidi
- - user-select
- - vertical-align
- - visibility
- - voice-balance
- - voice-duration
- - voice-family
- - voice-pitch
- - voice-range
- - voice-rate
- - voice-stress
- - voice-volume
- - volume
- - white-space
- - widows
- - width
- - will-change
- - word-break
- - word-spacing
- - word-wrap
- - wrap-after
- - wrap-before
- - wrap-flow
- - wrap-inside
- - wrap-through
- - writing-mode
- - z-index
-
-
- - -moz-animation-name
- - -moz-animation-duration
- - -moz-animation-iteration
- - -moz-animation-direction
- - -moz-animation-delay
- - -moz-animation-play-state
- - -moz-animation-fill-mode
- - -moz-background-size
- - -moz-border-image
- - -moz-border-bottom-colors
- - -moz-border-left-colors
- - -moz-border-radius
- - -moz-border-radius-topleft
- - -moz-border-radius-topright
- - -moz-border-radius-bottomleft
- - -moz-border-radius-bottomright
- - -moz-border-right-colors
- - -moz-border-top-colors
- - -moz-box
- - -moz-box-flex
- - -moz-box-shadow
- - -moz-box-sizing
- - -moz-column-count
- - -moz-column-gap
- - -moz-hyphens
- - -moz-linear-gradient
- - -moz-opacity
- - -moz-outline-style
- - -moz-perspective
- - -moz-radial-gradient
- - -moz-resize
- - -moz-transform
- - -moz-transform-origin
- - -moz-transform-style
- - -moz-transition
- - -moz-transition-property
- - -moz-transition-duration
-
-
- - -o-background-size
- - -o-linear-gradient
- - -o-text-overflow
- - -o-transition
- - -o-transform-origin
-
-
- - konq_bgpos_x
- - konq_bgpos_y
- - -khtml-background-size
- - -khtml-border-top-left-radius
- - -khtml-border-top-right-radius
- - -khtml-border-bottom-left-radius
- - -khtml-border-bottom-right-radius
- - -khtml-border-radius
- - -khtml-box-shadow
- - -khtml-opacity
-
-
- - -webkit-appearance
- - -webkit-animation-name
- - -webkit-animation-duration
- - -webkit-animation-iteration
- - -webkit-animation-direction
- - -webkit-animation-delay
- - -webkit-animation-play-state
- - -webkit-animation-fill-mode
- - -webkit-background-size
- - -webkit-border-image
- - -webkit-border-bottom-colors
- - -webkit-border-left-colors
- - -webkit-border-radius
- - -webkit-border-right-colors
- - -webkit-border-top-colors
- - -webkit-border-top-left-radius
- - -webkit-border-top-right-radius
- - -webkit-border-bottom-left-radius
- - -webkit-border-bottom-right-radius
- - -webkit-border-radius-bottomleft
- - -webkit-border-radius-bottomright
- - -webkit-box-flex
- - -webkit-box-reflect
- - -webkit-box-shadow
- - -webkit-box-sizing
- - -webkit-column-count
- - -webkit-column-gap
- - -webkit-hyphens
- - -webkit-linear-gradient
- - -webkit-gradient
- - -webkit-perspective
- - -webkit-text-fill-color
- - -webkit-text-stroke-color
- - -webkit-text-stroke-width
- - -webkit-text-size-adjust
- - -webkit-transform
- - -webkit-transform-origin
- - -webkit-transform-style
- - -webkit-transition
- - -webkit-transition-property
- - -webkit-transition-duration
-
-
- - zoom
- - -ms-animation-name
- - -ms-animation-duration
- - -ms-animation-iteration
- - -ms-animation-direction
- - -ms-animation-delay
- - -ms-animation-play-state
- - -ms-animation-fill-mode
- - -ms-box-sizing
- - -ms-filter
- - -ms-interpolation-mode
- - -ms-linear-gradient
- - -ms-text-size-adjust
- - -ms-transform
- - -ms-transition
-
-
- - font-family
- - font-size
- - font-stretch
- - font-style
- - font-variant
- - font-weight
- - unicode-range
- - units-per-em
- - src
- - panose-1
- - stemv
- - stemh
- - slope
- - cap-height
- - x-height
- - ascent
- - descent
- - widths
- - bbox
- - definition-src
- - baseline
- - centerline
- - mathline
- - topline
+ properties##CSS
+ within-@font-face##CSS
- - inherit
- - none
- - hidden
- - dotted
- - dashed
- - solid
- - double
- - groove
- - ridge
- - inset
- - outset
- - xx-small
- - x-small
- - small
- - medium
- - large
- - x-large
- - xx-large
- - smaller
- - larger
- - italic
- - oblique
- - small-caps
- - normal
- - bold
- - bolder
- - lighter
- - light
- - 100
- - 200
- - 300
- - 400
- - 500
- - 600
- - 700
- - 800
- - 900
- - transparent
- - repeat
- - repeat-x
- - repeat-y
- - no-repeat
- - baseline
- - sub
- - super
- - top
- - text-top
- - middle
- - bottom
- - text-bottom
- - left
- - right
- - center
- - justify
- - konq-center
- - disc
- - circle
- - square
- - box
- - decimal
- - decimal-leading-zero
- - lower-roman
- - upper-roman
- - lower-greek
- - lower-alpha
- - lower-latin
- - upper-alpha
- - upper-latin
- - hebrew
- - armenian
- - georgian
- - cjk-ideographic
- - hiragana
- - katakana
- - hiragana-iroha
- - katakana-iroha
- - inline
- - inline-block
- - block
- - list-item
- - run-in
- - compact
- - marker
- - table
- - inline-table
- - table-row-group
- - table-header-group
- - table-footer-group
- - table-row
- - table-column-group
- - table-column
- - table-cell
- - table-caption
- - auto
- - crosshair
- - default
- - pointer
- - move
- - e-resize
- - ne-resize
- - nw-resize
- - n-resize
- - se-resize
- - sw-resize
- - s-resize
- - w-resize
- - text
- - wait
- - help
- - above
- - absolute
- - always
- - avoid
- - below
- - bidi-override
- - blink
- - both
- - capitalize
- - caption
- - clip
- - close-quote
- - collapse
- - condensed
- - crop
- - cross
- - ellipsis
- - ellipsis-word
- - embed
- - expanded
- - extra-condensed
- - extra-expanded
- - fixed
- - hand
- - hide
- - higher
- - icon
- - inside
- - invert
- - landscape
- - level
- - line-through
- - loud
- - lower
- - lowercase
- - ltr
- - menu
- - message-box
- - mix
- - narrower
- - no-close-quote
- - no-open-quote
- - nowrap
- - open-quote
- - outside
- - overline
- - portrait
- - pre
- - pre-line
- - pre-wrap
- - relative
- - rtl
- - scroll
- - semi-condensed
- - semi-expanded
- - separate
- - show
- - small-caption
- - static
- - static-position
- - status-bar
- - thick
- - thin
- - ultra-condensed
- - ultra-expanded
- - underline
- - uppercase
- - visible
- - wider
- - break
- - serif
- - sans-serif
- - cursive
- - fantasy
- - monospace
- - border-box
- - content-box
- - -epub-hyphens
+ values##CSS
+
+
+
+ value keywords##CSS
-
-
- - aliceblue
- - antiquewhite
- - aqua
- - aquamarine
- - azure
- - beige
- - bisque
- - black
- - blanchedalmond
- - blue
- - blueviolet
- - brown
- - burlywood
- - cadetblue
- - chartreuse
- - chocolate
- - coral
- - cornflowerblue
- - cornsilk
- - crimson
- - cyan
- - darkblue
- - darkcyan
- - darkgoldenrod
- - darkgray
- - darkgreen
- - darkgrey
- - darkkhaki
- - darkmagenta
- - darkolivegreen
- - darkorange
- - darkorchid
- - darkred
- - darksalmon
- - darkseagreen
- - darkslateblue
- - darkslategray
- - darkslategrey
- - darkturquoise
- - darkviolet
- - deeppink
- - deepskyblue
- - dimgray
- - dimgrey
- - dodgerblue
- - firebrick
- - floralwhite
- - forestgreen
- - fuchsia
- - gainsboro
- - ghostwhite
- - gold
- - goldenrod
- - gray
- - green
- - greenyellow
- - grey
- - honeydew
- - hotpink
- - indianred
- - indigo
- - ivory
- - khaki
- - lavender
- - lavenderblush
- - lawngreen
- - lemonchiffon
- - lightblue
- - lightcoral
- - lightcyan
- - lightgoldenrodyellow
- - lightgray
- - lightgreen
- - lightgrey
- - lightpink
- - lightsalmon
- - lightseagreen
- - lightskyblue
- - lightslategray
- - lightslategrey
- - lightsteelblue
- - lightyellow
- - lime
- - limegreen
- - linen
- - magenta
- - maroon
- - mediumaquamarine
- - mediumblue
- - mediumorchid
- - mediumpurple
- - mediumseagreen
- - mediumslateblue
- - mediumspringgreen
- - mediumturquoise
- - mediumvioletred
- - midnightblue
- - mintcream
- - mistyrose
- - moccasin
- - navajowhite
- - navy
- - oldlace
- - olive
- - olivedrab
- - orange
- - orangered
- - orchid
- - palegoldenrod
- - palegreen
- - paleturquoise
- - palevioletred
- - papayawhip
- - peachpuff
- - peru
- - pink
- - plum
- - powderblue
- - purple
- - red
- - rosybrown
- - royalblue
- - saddlebrown
- - salmon
- - sandybrown
- - seagreen
- - seashell
- - sienna
- - silver
- - skyblue
- - slateblue
- - slategray
- - slategrey
- - snow
- - springgreen
- - steelblue
- - tan
- - teal
- - thistle
- - tomato
- - turquoise
- - violet
- - wheat
- - white
- - whitesmoke
- - yellow
- - yellowgreen
-
-
-
- - ActiveBorder
- - ActiveCaption
- - AppWorkspace
- - Background
- - ButtonFace
- - ButtonHighlight
- - ButtonShadow
- - ButtonText
- - CaptionText
- - GrayText
- - Highlight
- - HighlightText
- - InactiveBorder
- - InactiveCaption
- - InactiveCaptionText
- - InfoBackground
- - InfoText
- - Menu
- - MenuText
- - Scrollbar
- - ThreeDDarkShadow
- - ThreeDFace
- - ThreeDHighlight
- - ThreeDLightShadow
- - ThreeDShadow
- - Window
- - WindowFrame
- - WindowText
+ colors##CSS
-
- - attr
- - calc
- - counter
- - counters
- - format
- - hsl
- - hsla
- - image
- - linear-gradient
- - local
- - radial-gradient
- - rect
- - repeating-linear-gradient
- - repeating-radial-gradient
- - rgb
- - rgba
- - toggle
- - url
-
-
- - expression
+ functions##CSS
- color
- convert
@@ -1143,12 +154,10 @@
- - and
- - not
- - only
+ media operators##CSS
- or
- width
- min-width
@@ -1186,114 +195,93 @@
- - hover
- - link
- - visited
- - active
- - focus
- - first-child
- - last-child
- - only-child
- - first-of-type
- - last-of-type
- - only-of-type
- - first-letter
- - first-line
- - before
- - after
- - selection
- - root
- - empty
- - target
- - enabled
- - disabled
- - checked
- - indeterminate
- - nth-child
- - nth-last-child
- - nth-of-type
- - nth-last-of-type
- - not
-
+ pseudoclasses##CSS
- extend
-
+
-
-
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1447,6 +435,10 @@
+
+
+
+