fixes #175 variables with underscore

Internally Sass stores all variables using a dash instead of an
underscore. By using Sass to look up variables, the name got converted
automatically when creating the CSS for displaying the variables. This
is solved by using the class name for the variable with an underscore.

lib/livingstyleguide/filters/colors.rb

@@ -21,7 +21,7 @@
       elsif variable[0] != '$'
         variable = "$#{variable}"
       end
-      %Q(<li class="livingstyleguide--color-swatch #{css_class || variable}">#{variable}</li>\n)
+      %Q(<li class="livingstyleguide--color-swatch #{css_class || variable.tr("_", "-")}">#{variable}</li>\n)
     end.join("\n")
     %(<ul class="livingstyleguide--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
   end

test/unit/filters/colors_test.rb

@@ -19,11 +19,11 @@ def test_colors_of_file
   def test_defined_colors
     assert_render_equals <<-INPUT, <<-OUTPUT
       @colors
-      $orange $green
+      $my-orange $my_green
     INPUT
       <ul class="livingstyleguide--color-swatches -lsg-2-columns">
-        <li class="livingstyleguide--color-swatch $orange">$orange</li>
-        <li class="livingstyleguide--color-swatch $green">$green</li>
+        <li class="livingstyleguide--color-swatch $my-orange">$my-orange</li>
+        <li class="livingstyleguide--color-swatch $my-green">$my_green</li>
       </ul>
     OUTPUT
   end