Refactored base to scss.

src/styles/color-pallete.html

@@ -97,4 +97,17 @@
       <td class="color-block" style="background-color: rgba(0,0,0,.4);"></td>
       <td class="color-block" style="background-color: rgba(0,0,0,.3);"></td>
    </tr>
+   <tr>
+      <td class="color-desc">
+         $grey5: #aaa
+      </td>
+      <td class="color-desc">
+         $grey6: #ddd
+      </td>
+
+   </tr>
+   <tr>
+      <td class="color-block" style="background-color: #aaa;"></td>
+      <td class="color-block" style="background-color: #ddd;"></td>
+   </tr>
 </table>

src/styles/global/_mixins.scss

@@ -9,6 +9,7 @@
   -khtml-user-select: $select;
   -moz-user-select: $select;
   -ms-user-select: $select;
+  -o-user-select: $select;
   -webkit-user-select: $select;
   user-select: $select;
 }
@@ -21,3 +22,14 @@
   -webkit-box-shadow: $shadow;
   box-shadow: $shadow;
 }
+
+@mixin transition-property($property) {
+  transition-property: $property;
+  -webkit-transition-property: $property;
+}
+
+@mixin transition-duration($duration) {
+  transition-duration: $duration;
+  -webkit-transition-duration: $duration;
+
+}

src/styles/global/_variables.scss

@@ -29,6 +29,9 @@ $bordercolor: #ccc;
 $actioncolor1: rgb(132,184,25);
 $actioncolor2: rgb(0,149,52);
 
+$light-text: #aaa;
+$lighter-text: #ddd;
+
 $grey3: rgba(0,0,0,.3);
 $grey4: rgba(0,0,0,.4);
 $dgrey: rgb(34,34,34);

src/styles/main.scss

@@ -20,7 +20,6 @@
  */
 
 @import "global/variables";
-// @import "compass";
 @import "compass";
 
 @import "libs/libs";