XtGem css template variables are only used in the xtgem_template.css file and only by the Site template color adjust tool
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_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}}   
*/