From a95e7086d79464c69e47215a8ad2a153219678d4 Mon Sep 17 00:00:00 2001
From: Josh Johnston <josh@x-team.com>
Date: Fri, 25 Sep 2015 14:24:10 +1000
Subject: [PATCH] demo of @value

---
 src/components/1-ScopedSelectors/ScopedSelectors.css | 6 ++++--
 src/components/shared/styles/animation-values.css    | 1 +
 src/components/shared/styles/animations.css          | 7 +++++--
 3 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 src/components/shared/styles/animation-values.css

diff --git a/src/components/1-ScopedSelectors/ScopedSelectors.css b/src/components/1-ScopedSelectors/ScopedSelectors.css
index 8fcb2c1..3c933b8 100644
--- a/src/components/1-ScopedSelectors/ScopedSelectors.css
+++ b/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;
diff --git a/src/components/shared/styles/animation-values.css b/src/components/shared/styles/animation-values.css
new file mode 100644
index 0000000..b501fdf
--- /dev/null
+++ b/src/components/shared/styles/animation-values.css
@@ -0,0 +1 @@
+@value duration: 0.6s;
diff --git a/src/components/shared/styles/animations.css b/src/components/shared/styles/animations.css
index c371369..c130051 100644
--- a/src/components/shared/styles/animations.css
+++ b/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;
 }