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