refactor(scss): replace divide with multiply (#18)

Author: nzbin

sass/_dot-bricks.scss

@@ -5,7 +5,7 @@
  */
 
 $spacing: $dot-width + 6px;
-$top-pos: $spacing/2;
+$top-pos: $spacing * .5;
 $left-pos: -9999px;
 $x1: -$left-pos - $top-pos;
 $x2: -$left-pos - $top-pos + $spacing;

sass/_dot-fire.scss

@@ -7,7 +7,7 @@
 $left-pos: -9999px;
 $x1: -$left-pos;
 $y1: -1.5 * $dot-spacing;
-$y2: -1.5 * $dot-spacing/4;
+$y2: -1.5 * $dot-spacing * .25;
 $y3: 1.5 * $dot-spacing;
 
 .dot-fire {

sass/_dot-floating.scss

@@ -41,15 +41,15 @@ $d-min: 12px;
 
 @keyframes dot-floating {
   0% {
-    left: calc(-50% - #{$dot-width/2});
+    left: calc(-50% - #{$dot-width * .5});
   }
 
   75% {
-    left: calc(50% + #{$d-max * 2 + $dot-width/2});
+    left: calc(50% + #{$d-max * 2 + $dot-width * .5});
   }
 
   100% {
-    left: calc(50% + #{$d-max * 2 + $dot-width/2});
+    left: calc(50% + #{$d-max * 2 + $dot-width * .5});
   }
 }
 

sass/_dot-hourglass.scss

@@ -8,8 +8,8 @@
 $dot-color-hsl: hsl(0, 100%, 0%);
 
 $r: $dot-spacing;
-$origin-x: $dot-width/2;
-$origin-y: $dot-height/2 + $r;
+$origin-x: $dot-width * .5;
+$origin-y: $dot-height * .5 + $r;
 
 .dot-hourglass {
   position: relative;

sass/_dot-revolution.scss

@@ -22,7 +22,7 @@
 
     @include dot($bg-color: $dot-before-color);
 
-    transform-origin: $dot-width/2 ($dot-spacing + $dot-width/2);
+    transform-origin: ($dot-width * .5) ($dot-spacing + $dot-width * .5);
     animation: dot-revolution 1.4s linear infinite;
   }
 
@@ -32,7 +32,7 @@
 
     @include dot($bg-color: $dot-after-color);
 
-    transform-origin: $dot-width/2 ($dot-spacing * 2 + $dot-width/2);
+    transform-origin: ($dot-width * .5) ($dot-spacing * 2 + $dot-width * .5);
     animation: dot-revolution 1s linear infinite;
   }
 }

sass/_dot-spin.scss

@@ -9,8 +9,8 @@ $y1: $dot-spacing * 1.2;
 $-x1: -$x1;
 $-y1: -$y1;
 
-$x2: $x1/1.414;
-$y2: $y1/1.414;
+$x2: $x1 * .707107; // 1/√2
+$y2: $y1 * .707107; // 1/√2
 $-x2: -$x2;
 $-y2: -$y2;
 

sass/_dot-windmill.scss

@@ -25,15 +25,15 @@ $origin-y: 5px + $r;
   }
 
   &::before {
-    left: -($r/2 * 1.732);
-    top: $r + $r/2;
+    left: -($r * .5 * 1.732508); // √3
+    top: $r + $r * .5;
 
     @include dot($bg-color: $dot-before-color);
   }
 
   &::after {
-    left: $r/2 * 1.732;
-    top: $r + $r/2;
+    left: $r * .5 * 1.732508; // √3
+    top: $r + $r * .5;
 
     @include dot($bg-color: $dot-after-color);
   }

sass/_variables.scss

@@ -4,11 +4,11 @@
 
 $dot-width: 10px !default;
 $dot-height: 10px !default;
-$dot-radius: $dot-width/2 !default;
+$dot-radius: $dot-width * .5 !default;
 
 $dot-color: #9880ff !default;
 $dot-bg-color: $dot-color !default;
 $dot-before-color: $dot-color !default;
 $dot-after-color: $dot-color !default;
 
-$dot-spacing: $dot-width + $dot-width/2 !default;
+$dot-spacing: $dot-width + $dot-width * .5 !default;