In the main body of the stylesheet the color variables are used like this

.class_name {background:/*$var_name*/#ABCDEF/*e*/;}

The hex value is changed by the template color adjust tool
The Base and Mix area must be at the bottom of the stylesheet and wrapped in css comment tags

 /* ... */ 

• Base
The initial value variable name and title for use in the Site template color adjust tool are set in

{{base}}

Color 1 title
$var_1_name:#6 digit hex ;

Color 2 title
$var_2_name:#6 digit hex ;

{{/end}}

Base color #6080A0

• Mix
Complimentary color variables are created in

{{mix}}
...
{{/end}}

• Saturate
Create a new variable color by adjusting the saturation of a existing color by a + - percentage

$new_color:saturate $base_color 25;
$new_color:saturate $base_color -15;

Saturate +25% = #4080C0Saturate -15% = #73808D
• Lighten
Create a new color variable by lightening a existing color by a percentage

$new_color:lighten $base_color 20;
$new_color:lighten $base_color 10;

Lightened 20% = #A0B3C6Lightened 10% = #809AB3
• Darken
Create a new color variable by darkening a existing color by a percentage

$new_color:darken $base_color 20;
$new_color:darken $base_color 10;

Darkened 20% = #3A4D60Darkened 10% = #4D6780
• Color adjust
Create a new color variable by adjusting a existing colors hue saturation and lightness by given percentages

$new_color:color_adjust $base_color -10 15 10;

Color adjust -10% hue +15% saturation +10% lightness = #71B5C2

.base_color,.my_class_1,.my_class_2,.my_class_3,.my_class_4,.my_class_5,.my_class_6,.my_class_7
{margin:4px;padding:4px;border:3px double #000;border-radius:3px;display:inline-block;}

.base_color {background:/*$base_color*/#6080A0/*e*/;}
.my_class_1 {background:/*$sat_1*/#4080C0/*e*/;}
.my_class_2 {background:/*$sat_2*/#73808D/*e*/;}
.my_class_3 {background:/*$light_1*/#A0B3C6/*e*/;}
.my_class_4 {background:/*$light_2*/#809AB3/*e*/;}
.my_class_5 {background:/*$dark_1*/#3A4D60/*e*/;}
.my_class_6 {background:/*$dark_2*/#4D6780/*e*/;}
.my_class_7 {background:/*$adjust_1*/#71B5C2/*e*/;}

/*
{{base}}
Base Color
$base_color:#6080A0;
{{/end}}
  
{{mix}}
$sat_1:saturate $base_color 25;
$sat_2:saturate $base_color -15;
$light_1:lighten $base_color 20;
$light_2:lighten $base_color 10;
$dark_1:darken $base_color 20;
$dark_2:darken $base_color 10;
$adjust_1:adjust_color $base_color -10 15 10;
{{/end}}   
*/