refactor: rebuild with sass module api

nzbin · Nov 27, 2022 · f0fcf7b · f0fcf7b
1 parent b286792
commit f0fcf7b
Show file tree

Hide file tree

Showing 26 changed files with 298 additions and 235 deletions.
diff --git a/_index.scss b/_index.scss
@@ -0,0 +1 @@
+@forward 'scss/three-dots.scss';
diff --git a/dist/three-dots.css.map b/dist/three-dots.css.map
diff --git a/dist/three-dots.min.css.map b/dist/three-dots.min.css.map
diff --git a/package.json b/package.json
@@ -29,12 +29,12 @@
     "start": "run-p build watch",
     "build": "run-s clean sass sassmin postcss copy",
     "clean": "rimraf dist",
-    "sass": "sass --style=expanded sass/three-dots.scss dist/three-dots.css",
-    "sassmin": "sass --style=compressed sass/three-dots.scss dist/three-dots.min.css",
+    "sass": "sass --style=expanded scss/three-dots.scss dist/three-dots.css",
+    "sassmin": "sass --style=compressed scss/three-dots.scss dist/three-dots.min.css",
     "copy": "cp dist/three-dots.css docs/css",
     "postcss": "postcss -r dist/*.css --map",
     "watch": "onchange sass -- run-s sass copy",
-    "lint": "stylelint \"sass/**/*.scss\" --fix",
+    "lint": "stylelint \"scss/**/*.scss\" --fix",
     "prepublish": "npm run build"
   },
   "devDependencies": {

diff --git a/scss/_dot-bouncing.scss b/scss/_dot-bouncing.scss
@@ -5,11 +5,14 @@
  * ==============================================
  */
 
+@use './variables';
+@use './mixins';
+
 $d: 20px;
 
 .dot-bouncing {
   position: relative;
-  height: $dot-height;
+  height: variables.$dot-height;
   font-size: 10px;
 
   &::before {
@@ -22,7 +25,7 @@ $d: 20px;
 
 @keyframes dot-bouncing {
   0% {
-    top: -$d;
+    top: - $d;
     animation-timing-function: ease-in;
   }
 
@@ -41,10 +44,10 @@ $d: 20px;
   }
 
   90% {
-    top: -$d;
+    top: - $d;
   }
 
   100% {
-    top: -$d;
+    top: - $d;
   }
 }
diff --git a/scss/_dot-bricks.scss b/scss/_dot-bricks.scss
@@ -4,117 +4,120 @@
  * ==============================================
  */
 
-$spacing: $dot-width + 6px;
+@use './variables';
+@use './mixins';
+
+$spacing: variables.$dot-width + 6px;
 $top-pos: $spacing * .5;
 $left-pos: -9999px;
-$x1: -$left-pos - $top-pos;
-$x2: -$left-pos - $top-pos + $spacing;
+$x1: - $left-pos - $top-pos;
+$x2: - $left-pos - $top-pos + $spacing;
 $y1: 0;
-$y2: -$spacing;
+$y2: - $spacing;
 
 .dot-bricks {
   position: relative;
   top: $top-pos;
   left: $left-pos;
 
-  @include dot;
+  @include mixins.dot;
 
   box-shadow:
-    $x1 $y2 0 0 $dot-before-color,
-    $x1 $y1 0 0 $dot-color,
-    $x2 $y1 0 0 $dot-after-color;
+    $x1 $y2 0 0 variables.$dot-before-color,
+    $x1 $y1 0 0 variables.$dot-color,
+    $x2 $y1 0 0 variables.$dot-after-color;
   animation: dot-bricks 2s infinite ease;
 }
 
 @keyframes dot-bricks {
   0% {
     box-shadow:
-      $x1 $y2 0 0 $dot-before-color,
-      $x1 $y1 0 0 $dot-color,
-      $x2 $y1 0 0 $dot-after-color;
+      $x1 $y2 0 0 variables.$dot-before-color,
+      $x1 $y1 0 0 variables.$dot-color,
+      $x2 $y1 0 0 variables.$dot-after-color;
   }
 
   8.333% {
     box-shadow:
-      $x2 $y2 0 0 $dot-before-color,
-      $x1 $y1 0 0 $dot-color,
-      $x2 $y1 0 0 $dot-after-color;
+      $x2 $y2 0 0 variables.$dot-before-color,
+      $x1 $y1 0 0 variables.$dot-color,
+      $x2 $y1 0 0 variables.$dot-after-color;
   }
 
   16.667% {
     box-shadow:
-      $x2 $y2 0 0 $dot-before-color,
-      $x1 $y2 0 0 $dot-color,
-      $x2 $y1 0 0 $dot-after-color;
+      $x2 $y2 0 0 variables.$dot-before-color,
+      $x1 $y2 0 0 variables.$dot-color,
+      $x2 $y1 0 0 variables.$dot-after-color;
   }
 
   25% {
     box-shadow:
-      $x2 $y2 0 0 $dot-before-color,
-      $x1 $y2 0 0 $dot-color,
-      $x1 $y1 0 0 $dot-after-color;
+      $x2 $y2 0 0 variables.$dot-before-color,
+      $x1 $y2 0 0 variables.$dot-color,
+      $x1 $y1 0 0 variables.$dot-after-color;
   }
 
   33.333% {
     box-shadow:
-      $x2 $y1 0 0 $dot-before-color,
-      $x1 $y2 0 0 $dot-color,
-      $x1 $y1 0 0 $dot-after-color;
+      $x2 $y1 0 0 variables.$dot-before-color,
+      $x1 $y2 0 0 variables.$dot-color,
+      $x1 $y1 0 0 variables.$dot-after-color;
   }
 
   41.667% {
     box-shadow:
-      $x2 $y1 0 0 $dot-before-color,
-      $x2 $y2 0 0 $dot-color,
-      $x1 $y1 0 0 $dot-after-color;
+      $x2 $y1 0 0 variables.$dot-before-color,
+      $x2 $y2 0 0 variables.$dot-color,
+      $x1 $y1 0 0 variables.$dot-after-color;
   }
 
   50% {
     box-shadow:
-      $x2 $y1 0 0 $dot-before-color,
-      $x2 $y2 0 0 $dot-color,
-      $x1 $y2 0 0 $dot-after-color;
+      $x2 $y1 0 0 variables.$dot-before-color,
+      $x2 $y2 0 0 variables.$dot-color,
+      $x1 $y2 0 0 variables.$dot-after-color;
   }
 
   58.333% {
     box-shadow:
-      $x1 $y1 0 0 $dot-before-color,
-      $x2 $y2 0 0 $dot-color,
-      $x1 $y2 0 0 $dot-after-color;
+      $x1 $y1 0 0 variables.$dot-before-color,
+      $x2 $y2 0 0 variables.$dot-color,
+      $x1 $y2 0 0 variables.$dot-after-color;
   }
 
   66.666% {
     box-shadow:
-      $x1 $y1 0 0 $dot-before-color,
-      $x2 $y1 0 0 $dot-color,
-      $x1 $y2 0 0 $dot-after-color;
+      $x1 $y1 0 0 variables.$dot-before-color,
+      $x2 $y1 0 0 variables.$dot-color,
+      $x1 $y2 0 0 variables.$dot-after-color;
   }
 
   75% {
     box-shadow:
-      $x1 $y1 0 0 $dot-before-color,
-      $x2 $y1 0 0 $dot-color,
-      $x2 $y2 0 0 $dot-after-color;
+      $x1 $y1 0 0 variables.$dot-before-color,
+      $x2 $y1 0 0 variables.$dot-color,
+      $x2 $y2 0 0 variables.$dot-after-color;
   }
 
   83.333% {
     box-shadow:
-      $x1 $y2 0 0 $dot-before-color,
-      $x2 $y1 0 0 $dot-color,
-      $x2 $y2 0 0 $dot-after-color;
+      $x1 $y2 0 0 variables.$dot-before-color,
+      $x2 $y1 0 0 variables.$dot-color,
+      $x2 $y2 0 0 variables.$dot-after-color;
   }
 
   91.667% {
     box-shadow:
-      $x1 $y2 0 0 $dot-before-color,
-      $x1 $y1 0 0 $dot-color,
-      $x2 $y2 0 0 $dot-after-color;
+      $x1 $y2 0 0 variables.$dot-before-color,
+      $x1 $y1 0 0 variables.$dot-color,
+      $x2 $y2 0 0 variables.$dot-after-color;
   }
 
   100% {
     box-shadow:
-      $x1 $y2 0 0 $dot-before-color,
-      $x1 $y1 0 0 $dot-color,
-      $x2 $y1 0 0 $dot-after-color;
+      $x1 $y2 0 0 variables.$dot-before-color,
+      $x1 $y1 0 0 variables.$dot-color,
+      $x2 $y1 0 0 variables.$dot-after-color;
   }
 }
diff --git a/scss/_dot-carousel.scss b/scss/_dot-carousel.scss
@@ -4,43 +4,46 @@
  * ==============================================
  */
 
+@use './variables';
+@use './mixins';
+
 $left-pos: -9999px;
-$x1: -$left-pos - $dot-spacing;
-$x2: -$left-pos;
-$x3: -$left-pos + $dot-spacing;
+$x1: - $left-pos - variables.$dot-spacing;
+$x2: - $left-pos;
+$x3: - $left-pos + variables.$dot-spacing;
 
 .dot-carousel {
   position: relative;
   left: $left-pos;
 
-  @include dot;
+  @include mixins.dot;
 
   box-shadow:
-    $x1 0 0 0 $dot-before-color,
-    $x2 0 0 0 $dot-color,
-    $x3 0 0 0 $dot-after-color;
+    $x1 0 0 0 variables.$dot-before-color,
+    $x2 0 0 0 variables.$dot-color,
+    $x3 0 0 0 variables.$dot-after-color;
   animation: dot-carousel 1.5s infinite linear;
 }
 
 @keyframes dot-carousel {
   0% {
     box-shadow:
-      $x1 0 0 -1px $dot-before-color,
-      $x2 0 0 1px $dot-color,
-      $x3 0 0 -1px $dot-after-color;
+      $x1 0 0 -1px variables.$dot-before-color,
+      $x2 0 0 1px variables.$dot-color,
+      $x3 0 0 -1px variables.$dot-after-color;
   }
 
   50% {
     box-shadow:
-      $x3 0 0 -1px $dot-before-color,
-      $x1 0 0 -1px $dot-color,
-      $x2 0 0 1px $dot-after-color;
+      $x3 0 0 -1px variables.$dot-before-color,
+      $x1 0 0 -1px variables.$dot-color,
+      $x2 0 0 1px variables.$dot-after-color;
   }
 
   100% {
     box-shadow:
-      $x2 0 0 1px $dot-before-color,
-      $x3 0 0 -1px $dot-color,
-      $x1 0 0 -1px $dot-after-color;
+      $x2 0 0 1px variables.$dot-before-color,
+      $x3 0 0 -1px variables.$dot-color,
+      $x1 0 0 -1px variables.$dot-after-color;
   }
 }
diff --git a/scss/_dot-collision.scss b/scss/_dot-collision.scss
@@ -4,10 +4,13 @@
  * ==============================================
  */
 
+@use './variables';
+@use './mixins';
+
 .dot-collision {
   position: relative;
 
-  @include dot;
+  @include mixins.dot;
 
   &::before,
   &::after {
@@ -18,17 +21,17 @@
   }
 
   &::before {
-    left: -$dot-width;
+    left: - variables.$dot-width;
 
-    @include dot($bg-color: $dot-before-color);
+    @include mixins.dot($bg-color: variables.$dot-before-color);
 
     animation: dot-collision-before 2s infinite ease-in;
   }
 
   &::after {
-    left: $dot-width;
+    left: variables.$dot-width;
 
-    @include dot($bg-color: $dot-after-color);
+    @include mixins.dot($bg-color: variables.$dot-after-color);
 
     animation: dot-collision-after 2s infinite ease-in;
     animation-delay: 1s;
@@ -44,7 +47,7 @@
   }
 
   25% {
-    transform: translateX(-$dot-spacing);
+    transform: translateX(- variables.$dot-spacing);
   }
 }
 
@@ -57,6 +60,6 @@
   }
 
   25% {
-    transform: translateX($dot-spacing);
+    transform: translateX(variables.$dot-spacing);
   }
 }
diff --git a/scss/_dot-elastic.scss b/scss/_dot-elastic.scss
@@ -4,10 +4,13 @@
  * ==============================================
  */
 
+@use './variables';
+@use './mixins';
+
 .dot-elastic {
   position: relative;
 
-  @include dot;
+  @include mixins.dot;
 
   animation: dot-elastic 1s infinite linear;
 
@@ -20,17 +23,17 @@
   }
 
   &::before {
-    left: -$dot-spacing;
+    left: - variables.$dot-spacing;
 
-    @include dot($bg-color: $dot-before-color);
+    @include mixins.dot($bg-color: variables.$dot-before-color);
 
     animation: dot-elastic-before 1s infinite linear;
   }
 
   &::after {
-    left: $dot-spacing;
+    left: variables.$dot-spacing;
 
-    @include dot($bg-color: $dot-after-color);
+    @include mixins.dot($bg-color: variables.$dot-after-color);
 
     animation: dot-elastic-after 1s infinite linear;
   }