diff --git a/.gitignore b/.gitignore
index 6650258..85c9d4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ d3.js
 d3.min.js
 components
 build
+.sass-cache
diff --git a/.travis.yml b/.travis.yml
index 376a857..cd93ed1 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,3 +2,4 @@ language: node_js
 
 before_script:
 - npm install -g grunt-cli
+- gem install sass
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index 4ee8f3b..53aff24 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -6,6 +6,9 @@ module.exports = (grunt) ->
           concat:
             tasks: 'concat'
             files: ['src/*.js']
+          sass:
+            tasks: 'sass'
+            files: ['src/scss/*.scss']
 
         concat:
           dist:
@@ -98,4 +101,11 @@ module.exports = (grunt) ->
             src: 'c3.css'
             dest: 'c3.min.css'
 
-    grunt.registerTask 'default', ['concat', 'jshint', 'jasmine', 'cssmin', 'uglify']
+        sass:
+          options:
+            sourcemap: 'none'
+          c3:
+            files:
+              'c3.css': 'src/scss/main.scss'
+
+    grunt.registerTask 'default', ['concat', 'jshint', 'jasmine', 'sass', 'cssmin', 'uglify']
diff --git a/package.json b/package.json
index b86cc74..94804db 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,12 @@
     "d3": "~3.4.4"
   },
   "devDependencies": {
-    "grunt": "~0.4.1",
+    "grunt": "^0.4.5",
     "grunt-contrib-concat": "~0.5.0",
     "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-jasmine": "~0.8.0",
     "grunt-contrib-jshint": "~0.7.1",
+    "grunt-contrib-sass": "^0.8.1",
     "grunt-contrib-uglify": "~0.4.0",
     "grunt-contrib-watch": "^0.6.1",
     "load-grunt-tasks": "~0.2.0"
diff --git a/src/scss/arc.scss b/src/scss/arc.scss
new file mode 100644
index 0000000..ddea0d7
--- /dev/null
+++ b/src/scss/arc.scss
@@ -0,0 +1,24 @@
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em;
+}
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+/*  font-size: 28px !important;*/
+}
diff --git a/src/scss/area.scss b/src/scss/area.scss
new file mode 100644
index 0000000..5f3e2c4
--- /dev/null
+++ b/src/scss/area.scss
@@ -0,0 +1,4 @@
+.c3-area {
+  stroke-width: 0;
+  opacity: 0.2;
+}
diff --git a/src/scss/axis.scss b/src/scss/axis.scss
new file mode 100644
index 0000000..140ee4e
--- /dev/null
+++ b/src/scss/axis.scss
@@ -0,0 +1,14 @@
+.c3-axis-x .tick {
+}
+.c3-axis-x-label {
+}
+
+.c3-axis-y .tick {
+}
+.c3-axis-y-label {
+}
+
+.c3-axis-y2 .tick {
+}
+.c3-axis-y2-label {
+}
diff --git a/src/scss/bar.scss b/src/scss/bar.scss
new file mode 100644
index 0000000..08ae998
--- /dev/null
+++ b/src/scss/bar.scss
@@ -0,0 +1,6 @@
+.c3-bar {
+  stroke-width: 0;
+}
+.c3-bar._expanded_ {
+  fill-opacity: 0.75;
+}
diff --git a/src/scss/brush.scss b/src/scss/brush.scss
new file mode 100644
index 0000000..0f547c4
--- /dev/null
+++ b/src/scss/brush.scss
@@ -0,0 +1,3 @@
+.c3-brush .extent {
+  fill-opacity: .1;
+}
diff --git a/src/scss/chart.scss b/src/scss/chart.scss
new file mode 100644
index 0000000..969e8da
--- /dev/null
+++ b/src/scss/chart.scss
@@ -0,0 +1,29 @@
+.c3 svg {
+  font: 10px sans-serif;
+}
+.c3 path, .c3 line {
+  fill: none;
+  stroke: #000;
+}
+.c3 text {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
+.c3-chart-arc path {
+  stroke: #fff;
+
+}
+.c3-chart-arc text {
+  fill: #fff;
+  font-size: 13px;
+}
diff --git a/src/scss/focus.scss b/src/scss/focus.scss
new file mode 100644
index 0000000..02db8df
--- /dev/null
+++ b/src/scss/focus.scss
@@ -0,0 +1,9 @@
+.c3-target.c3-focused {
+  opacity: 1;
+}
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+  stroke-width: 2px;
+}
+.c3-target.c3-defocused {
+  opacity: 0.3 !important;
+}
diff --git a/src/scss/grid.scss b/src/scss/grid.scss
new file mode 100644
index 0000000..fd9ce13
--- /dev/null
+++ b/src/scss/grid.scss
@@ -0,0 +1,11 @@
+.c3-grid line {
+  stroke: #aaa;
+}
+.c3-grid text {
+  fill: #aaa;
+}
+.c3-xgrid, .c3-ygrid {
+  stroke-dasharray: 3 3;
+}
+.c3-xgrid-focus {
+}
diff --git a/src/scss/legend.scss b/src/scss/legend.scss
new file mode 100644
index 0000000..8d6d971
--- /dev/null
+++ b/src/scss/legend.scss
@@ -0,0 +1,13 @@
+.c3-legend-item {
+  font-size: 12px;
+}
+.c3-legend-item-hidden {
+  opacity: 0.15;
+}
+
+.c3-legend-background {
+  opacity: 0.75;
+  fill: white;
+  stroke: lightgray;
+  stroke-width: 1
+}
diff --git a/src/scss/line.scss b/src/scss/line.scss
new file mode 100644
index 0000000..7690afa
--- /dev/null
+++ b/src/scss/line.scss
@@ -0,0 +1,3 @@
+.c3-line {
+  stroke-width: 1px;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..20777b4
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,59 @@
+/*-- Chart --*/
+
+@import 'chart';
+
+/*-- Axis --*/
+
+@import 'axis';
+
+/*-- Grid --*/
+
+@import 'grid';
+
+/*-- Text on Chart --*/
+
+@import 'text';
+
+/*-- Line --*/
+
+@import 'line';
+
+/*-- Point --*/
+
+@import 'point';
+
+/*-- Bar --*/
+
+@import 'bar';
+
+/*-- Focus --*/
+
+@import 'focus';
+
+/*-- Region --*/
+
+@import 'region';
+
+/*-- Brush --*/
+
+@import 'brush';
+
+/*-- Select - Drag --*/
+
+@import 'select_drag';
+
+/*-- Legend --*/
+
+@import 'legend';
+
+/*-- Tooltip --*/
+
+@import 'tooltip';
+
+/*-- Area --*/
+
+@import 'area';
+
+/*-- Arc --*/
+
+@import 'arc';
diff --git a/src/scss/point.scss b/src/scss/point.scss
new file mode 100644
index 0000000..532a644
--- /dev/null
+++ b/src/scss/point.scss
@@ -0,0 +1,8 @@
+.c3-circle._expanded_ {
+  stroke-width: 1px;
+  stroke: white;
+}
+.c3-selected-circle {
+  fill: white;
+  stroke-width: 2px;
+}
diff --git a/src/scss/region.scss b/src/scss/region.scss
new file mode 100644
index 0000000..d77f7c3
--- /dev/null
+++ b/src/scss/region.scss
@@ -0,0 +1,4 @@
+.c3-region {
+  fill: steelblue;
+  fill-opacity: .1;
+}
diff --git a/src/scss/select_drag.scss b/src/scss/select_drag.scss
new file mode 100644
index 0000000..ef5cb1a
--- /dev/null
+++ b/src/scss/select_drag.scss
@@ -0,0 +1,2 @@
+.c3-dragarea {
+}
diff --git a/src/scss/text.scss b/src/scss/text.scss
new file mode 100644
index 0000000..d4453ce
--- /dev/null
+++ b/src/scss/text.scss
@@ -0,0 +1,7 @@
+.c3-text {
+}
+
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em;
+}
diff --git a/src/scss/tooltip.scss b/src/scss/tooltip.scss
new file mode 100644
index 0000000..99f36f9
--- /dev/null
+++ b/src/scss/tooltip.scss
@@ -0,0 +1,38 @@
+.c3-tooltip-container {
+  z-index: 10;
+}
+.c3-tooltip {
+  border-collapse:collapse;
+  border-spacing:0;
+  background-color:#fff;
+  empty-cells:show;
+  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+  opacity: 0.9;
+}
+.c3-tooltip tr {
+  border:1px solid #CCC;
+}
+.c3-tooltip th {
+  background-color: #aaa;
+  font-size:14px;
+  padding:2px 5px;
+  text-align:left;
+  color:#FFF;
+}
+.c3-tooltip td {
+  font-size:13px;
+  padding: 3px 6px;
+  background-color:#fff;
+  border-left:1px dotted #999;
+}
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
+.c3-tooltip td.value{
+  text-align: right;
+}