<h1>LESS is More</h1>
<div>
  <h2>Now is the time</h2>
  <p>... for <a>all good men</a> to come to the aid of their country.</p>
</div>
<p>Another paragraph, nothing after it.</p>

<p class="info error">Error</p>
<p class="info warning">Warning</p>

<p class="fruit">Bananas are </p>

/* define variables using @ */ 
@primaryColor: purple;
@secondaryColor: #999;
@labelVar: " (famous quote)";
@h1Size: 1.75em;
@h2Size: 1.25em;
@borderLite: 10px solid @secondaryColor;
@paddingVar: 14px 28px;

/* mixins define common props once */ 
.commonCSS {
  .border-radius(20px);
  .colorBorder(white, 5px);
  padding: 10px;
}

body { 
  margin: 20px;
  font-family: Georgia;
  line-height: 1.3em;
  background-color: black;
  color: white;
}
h1 {
  .commonCSS;
  font-size: @h1Size;
  margin-bottom: .5em;
  color: lighten(@primaryColor, 60%);
}
h2 {
  .commonCSS;
  color: @secondaryColor + #00f;
  font-size: @h2Size + .25; 
}
div {
  border: @borderLite;
  padding: @paddingVar;
  .box-shadow(3px, 3px, 4px, white);
  
  p:after {
    content: @labelVar; 
  }
  
  a { 
    color: red;
  
    &:hover {
      color: green; 
    }
  }
}

/* parameterized mixin, default 5px */ 
.border-radius(@radius: 5px) {
  -moz-border-radius: @radius; 
  -webkit-border-radius: @radius; 
  -ms-border-radius: @radius; 
  border-radius: @radius;
}

.colorBorder(@color: white, @width: 1px) {
  border: @width solid @color;  
}

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  -ms-box-shadow: @arguments;
  -box-shadow: @arguments;
}

/* pattern matching */ 
.info {
  margin: 10px 0px; 
}
.alert(error) {
  color: red;
}
.alert(warning) {
  color: orange;
}
.alert(@_) { /* matches any single param */
  border: 1px solid gray; 
  padding: 10px;
}
.info.error { .alert(error); }
.info.warning { .alert(warning); }

/* guarded mixins */ 
.capitalize(@color) when (lightness(@color) =< 50%) { 
  text-transform: uppercase;
}
.capitalize(@color) when (lightness(@color) > 50%) { 
  text-transform: lowercase;
}
p {
  .capitalize(#888); 
}

/* replicating operators via guard */ 
.fruit_color(@a) when (@a = banana) {  
  content: "yellow";
}
.fruit_color(@a) when (@a = orange) {  
  content: "orange";
}

p.fruit:after {
  .fruit_color(banana);
}

/* built-in functions

pass a color and % amount to ... 
   lighten
   darken
   saturate
   desaturate
   fadein
   fadeout
   fade
   spin
   mix

create a color ...
   hsl(hue, % saturation, % lightness)

pass a color to ...
   hue 
   saturation
   lightness
   alpha

pass a number to ...
   round
   ceil
   floor
   percentage

*/