Merge pull request #5 from css-modules/values-demo

Demo of @value

Author: joshwnj

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;
 }