<h1>SCSS is Bliss</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="fruit">Bananas are </p>

@import "compass/css3";

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

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

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

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

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

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

/* operators, something less can't do like this, but less does have guarded mixins */ 
$fruit: banana;
$fruit_color: if($fruit == "banana", "yellow", "something else"); 

p.fruit:after {
  content: $fruit_color; 
}

/* built-in functions

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

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

pass a color to ...
   hue 
   saturation
   lightness
   alpha
   grayscale
   complement
   invert

pass a number to ...
   round
   ceil
   floor
   percentage
   abs
   min
   max

*/