ExFlo · April 14, 2020 14:20 · Dec 13, 2013 · Dec 13, 2013 · Dec 13, 2013 · Dec 13, 2013
diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -37,11 +37,12 @@ Because it only accepts 6-digit hex values you may need to convert your color fr
 
 ```javascript
 var rgb2hex = function(rgb) {
+  // A very ugly regex that parses a string such as 'rgb(191, 0, 46)' and produces an array
   rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d\.]+))?\)$/);
-  function hex(x) {
-    return ("0" + parseInt(x).toString(16)).slice(-2);
-  }
-  return (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase();
+
+  function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } // another way to convert a decimal to hex
+
+  return (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase(); // concatenate the pairs and return them upper cased
 };
 ```
 

diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -4,25 +4,26 @@ Here's my JavaScript version of Sass' `mix()` function.
 
 ```javascript
 var mix = function(color_1, color_2, weight) {
-  function d2h(d) { return d.toString(16); }
-  function h2d(h) { return parseInt(h, 16); }
+  function d2h(d) { return d.toString(16); }  // convert a decimal value to hex
+  function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal 
 
-  weight = (typeof(weight) !== 'undefined') ? weight : 50;
+  weight = (typeof(weight) !== 'undefined') ? weight : 50; // set the weight to 50%, if that argument is omitted
 
   var color = "#";
 
-  for(var i = 0; i <= 5; i += 2) {
-    var v1 = h2d(color_1.substr(i, 2)),
+  for(var i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairs—red, green, and blue
+    var v1 = h2d(color_1.substr(i, 2)), // extract the current pairs
         v2 = h2d(color_2.substr(i, 2)),
-        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+        // combine the current pairs from each source color, according to the specified weight
+        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0))); 
 
-    while(val.length < 2){
-      val = '0' + val;
-    }
-    color += val;
+    while(val.length < 2) { val = '0' + val; } // prepend a '0' if val results in a single digit
+
+    color += val; // concatenate val to our new color string
   }
 
-  return color;
+  return color; // PROFIT!
 };
 ```
 

diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -53,11 +53,4 @@ var color2 = window.getComputedStyle(element2).backgroundColor; // '0000bb'
 var mixed = mix(rgb2hex(color1), rgb2hex(color2), 75); // returns #bf002e
 ```
 
-
-
-
-
-
-http://sassmeister.com/gist/7939513
-
-
+Play with the Sass version over on [SassMeister.com](http://sassmeister.com/gist/7939513)
diff --git a/color.js b/color.js
@@ -1,21 +0,0 @@
-var mix = function(color_1, color_2, weight) {
-  function d2h(d) { return d.toString(16); }
-  function h2d(h) { return parseInt(h, 16); }
-
-  weight = (typeof(weight) !== 'undefined') ? weight : 50;
-
-  var color = "#";
-
-  for(var i = 0; i <= 5; i += 2) {
-    var v1 = h2d(color_1.substr(i, 2)),
-        v2 = h2d(color_2.substr(i, 2)),
-        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-    while(val.length < 2){
-      val = '0' + val;
-    }
-    color += val;
-  }
-
-  return color;
-};

diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -2,15 +2,62 @@ I recently found myself needing to combine two colors. [Sass has a great functio
 
 Here's my JavaScript version of Sass' `mix()` function.
 
-<gist>color.js</gist>
+```javascript
+var mix = function(color_1, color_2, weight) {
+  function d2h(d) { return d.toString(16); }
+  function h2d(h) { return parseInt(h, 16); }
+
+  weight = (typeof(weight) !== 'undefined') ? weight : 50;
+
+  var color = "#";
+
+  for(var i = 0; i <= 5; i += 2) {
+    var v1 = h2d(color_1.substr(i, 2)),
+        v2 = h2d(color_2.substr(i, 2)),
+        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+    while(val.length < 2){
+      val = '0' + val;
+    }
+    color += val;
+  }
+
+  return color;
+};
+```
 
 Unlike the Sass version, my JavaScript version only accepts 6-digit hex values for the colors (`#ff0000` works, but `#f00` does not.) Like the Sass version, the `weight` argument is an integer value between 0 and 100.
 
 ```javascript
-var mixed = mix('ff0000', '0000bb', 75); // #bf002e
+var mixed = mix('ff0000', '0000bb', 75); // returns #bf002e
+```
+
+Because it only accepts 6-digit hex values you may need to convert your color from RGB, particularly if you obtained it using something like `window.getComputedStyle(div).backgroundColor;`, as I did. In that case, this function has you covered:
+
+```javascript
+var rgb2hex = function(rgb) {
+  rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d\.]+))?\)$/);
+  function hex(x) {
+    return ("0" + parseInt(x).toString(16)).slice(-2);
+  }
+  return (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase();
+};
 ```
 
+Use it like so:
+
+```javascript
+var color1 = window.getComputedStyle(element1).backgroundColor; // 'ff0000'
+var color2 = window.getComputedStyle(element2).backgroundColor; // '0000bb'
+
+var mixed = mix(rgb2hex(color1), rgb2hex(color2), 75); // returns #bf002e
+```
+
+
+
+
+
 
-http://sassmeister.com/gist/7939894
+http://sassmeister.com/gist/7939513
 
 
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
@@ -1 +0,0 @@
-<div></div>

diff --git a/SassMeister-input.scss b/SassMeister-input.scss
@@ -0,0 +1,10 @@
+// ----
+// Sass (v3.3.0.rc.1)
+// Compass (v0.13.alpha.10)
+// ----
+
+body {
+  width: 100%;
+  height: 10em;
+  background: mix(#ff0000, #0000bb, 75);
+}
diff --git a/SassMeister-output.css b/SassMeister-output.css
@@ -0,0 +1,5 @@
+body {
+  width: 100%;
+  height: 10em;
+  background: #bf002e;
+}
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
@@ -0,0 +1 @@
+<div></div>
diff --git a/color.js b/color.js
@@ -6,16 +6,16 @@ var mix = function(color_1, color_2, weight) {
 
   var color = "#";
 
-  for(var i=0; i <= 5; i+=2) {
+  for(var i = 0; i <= 5; i += 2) {
     var v1 = h2d(color_1.substr(i, 2)),
         v2 = h2d(color_2.substr(i, 2)),
-        val = d2h(Math.floor(v2 + (v1 - v2) * (weight/100.0) ));
+        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
 
     while(val.length < 2){
-      val = "0"+val;
+      val = '0' + val;
     }
     color += val;
   }
 
   return color;
-}
+};
diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -1,3 +1,16 @@
-This is a JavaScript version of Sass' `mix()` function.
+I recently found myself needing to combine two colors. [Sass has a great function for doing this](http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method), even allowing you to control the percentage of each color, but in my case the two colors needed to change every few seconds, so Sass was out of the question. Enter JavaScript.
+
+Here's my JavaScript version of Sass' `mix()` function.
+
+<gist>color.js</gist>
+
+Unlike the Sass version, my JavaScript version only accepts 6-digit hex values for the colors (`#ff0000` works, but `#f00` does not.) Like the Sass version, the `weight` argument is an integer value between 0 and 100.
+
+```javascript
+var mixed = mix('ff0000', '0000bb', 75); // #bf002e
+```
+
+
+http://sassmeister.com/gist/7939894
+
 
-<gist>color.js</gist>
diff --git a/color.js b/color.js
@@ -2,23 +2,14 @@ var mix = function(color_1, color_2, weight) {
   function d2h(d) { return d.toString(16); }
   function h2d(h) { return parseInt(h, 16); }
 
-  weight = weight || 50;
-
-  if(weight == 0) {
-    return color_1;
-  }
-
-  if(weight == 100) {
-    return color_2;
-  }
+  weight = (typeof(weight) !== 'undefined') ? weight : 50;
 
   var color = "#";
 
   for(var i=0; i <= 5; i+=2) {
     var v1 = h2d(color_1.substr(i, 2)),
-        v2 = h2d(color_2.substr(i, 2));
-
-    var val = d2h(Math.floor(v1 + (v2 - v1) * (weight/100.0) ));
+        v2 = h2d(color_2.substr(i, 2)),
+        val = d2h(Math.floor(v2 + (v1 - v2) * (weight/100.0) ));
 
     while(val.length < 2){
       val = "0"+val;

diff --git a/color.js b/color.js
@@ -1,11 +1,3 @@
-var rgb2hex = function(rgb) {
-  rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d\.]+))?\)$/);
-  function hex(x) {
-    return ("0" + parseInt(x).toString(16)).slice(-2);
-  }
-  return (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase();
-}
-
 var mix = function(color_1, color_2, weight) {
   function d2h(d) { return d.toString(16); }
   function h2d(h) { return parseInt(h, 16); }

diff --git a/roughdraft-2.md → color.js b/roughdraft-2.md → color.js
diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -1 +1,3 @@
-This is a JavaScript version of Sass' `mix()` function.
+This is a JavaScript version of Sass' `mix()` function.
+
+<gist>color.js</gist>
diff --git a/roughdraft-2.md b/roughdraft-2.md
@@ -0,0 +1,38 @@
+var rgb2hex = function(rgb) {
+  rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d\.]+))?\)$/);
+  function hex(x) {
+    return ("0" + parseInt(x).toString(16)).slice(-2);
+  }
+  return (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase();
+}
+
+var mix = function(color_1, color_2, weight) {
+  function d2h(d) { return d.toString(16); }
+  function h2d(h) { return parseInt(h, 16); }
+
+  weight = weight || 50;
+
+  if(weight == 0) {
+    return color_1;
+  }
+
+  if(weight == 100) {
+    return color_2;
+  }
+
+  var color = "#";
+
+  for(var i=0; i <= 5; i+=2) {
+    var v1 = h2d(color_1.substr(i, 2)),
+        v2 = h2d(color_2.substr(i, 2));
+
+    var val = d2h(Math.floor(v1 + (v2 - v1) * (weight/100.0) ));
+
+    while(val.length < 2){
+      val = "0"+val;
+    }
+    color += val;
+  }
+
+  return color;
+}
diff --git a/roughdraft-1.md b/roughdraft-1.md
@@ -0,0 +1 @@
+This is a JavaScript version of Sass' `mix()` function.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is a JavaScript version of Sass' `mix()` function.
No results found