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