demo of @value

Author: joshwnj

package.json

@@ -30,7 +30,7 @@
     "brfs": "git://github.com/joshwnj/brfs#ignore-option",
     "browserify": "^11.0.1",
     "budo": "^4.0.0",
-    "css-modulesify": "^0.6.1",
+    "css-modulesify": "git://github.com/css-modules/css-modulesify#values-support",
     "garnish": "^2.1.3",
     "gh-pages": "git://github.com/markdalgleish/gh-pages#cli-message",
     "hyperscript": "^1.4.6",

src/components/1-ScopedSelectors/ScopedSelectors.css

@@ -1,14 +1,16 @@
+@value niceGray: #777;
+
 .root {
   border-width: 2px;
   border-style: solid;
-  border-color: #777;
+  border-color: niceGray;
   padding: 0 20px;
   margin: 0 6px;
   max-width: 400px;
 }
 
 .text {
-  color: #777;
+  color: niceGray;
   font-size: 24px;
   font-family: helvetica, arial, sans-serif;
   font-weight: 600;

src/components/shared/styles/animation-values.css

@@ -0,0 +1 @@
+@value duration: 0.6s;

src/components/shared/styles/animations.css

@@ -1,8 +1,11 @@
+@value bounceAmount: -20px;
+@value duration as bounceDuration from "./animation-values.css";
+
 @keyframes bounce {
-  33% { transform: translateY(-20px); }
+  33% { transform: translateY(bounceAmount); }
   66% { transform: translateY(0px); }
 }
 
 .bounce {
-  animation: bounce 1s infinite ease-in-out;
+  animation: bounce bounceDuration infinite ease-in-out;
 }