From a770c08e25484bf34836292f39b6257e363afd66 Mon Sep 17 00:00:00 2001
From: Soheil Saheb-Jamii <anym@hotmail.fr>
Date: Sat, 13 May 2023 15:30:47 +0200
Subject: [PATCH] Change utils classes to be inside mixins for more control

---
 .gitignore               |   1 +
 .idea/watcherTasks.xml   |  10 +-
 anym-utility.css         |  42 ++++-
 anym-utility.css.map     |   2 +-
 anym-utility.min.css     |   2 +-
 anym-utility.scss        |   7 +-
 core.scss                |   2 +
 package-lock.json        | 342 ++++++++++++++++++++++++++++++++++++++-
 package.json             |   3 +
 utils/flex/_align.scss   |  61 +++----
 utils/flex/_basis.scss   |  19 ++-
 utils/flex/_flexbox.scss |  46 +++---
 utils/flex/_gap.scss     |  19 ++-
 13 files changed, 477 insertions(+), 79 deletions(-)
 create mode 100644 core.scss

diff --git a/.gitignore b/.gitignore
index c8686f8..8f41f9d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /.idea/codeStyles/codeStyleConfig.xml
+/node_modules/
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index afeb635..fc2e694 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -14,9 +14,9 @@
         <array />
       </option>
       <option name="outputFromStdout" value="false" />
-      <option name="program" value="//wsl$/Ubuntu/usr/local/lib/node_modules/sass/sass.js" />
+      <option name="program" value="$PROJECT_DIR$/node_modules/sass/sass.js" />
       <option name="runOnExternalChanges" value="true" />
-      <option name="scopeName" value="Project Files" />
+      <option name="scopeName" value="SCSS" />
       <option name="trackOnlyRoot" value="true" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
@@ -45,7 +45,7 @@
       <option name="arguments" value="-i $FileName$ -o $FileNameWithoutExtension$.min.css" />
       <option name="checkSyntaxErrors" value="true" />
       <option name="description" />
-      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="exitCodeBehavior" value="NEVER" />
       <option name="fileExtension" value="css" />
       <option name="immediateSync" value="true" />
       <option name="name" value="CSSO CSS Optimizer Ubuntu" />
@@ -54,9 +54,9 @@
         <array />
       </option>
       <option name="outputFromStdout" value="false" />
-      <option name="program" value="//wsl$/Ubuntu/usr/local/lib/node_modules/csso-cli/bin/csso" />
+      <option name="program" value="$USER_HOME$/.nvm/versions/node/v20.1.0/lib/node_modules/csso-cli/bin/csso" />
       <option name="runOnExternalChanges" value="true" />
-      <option name="scopeName" value="Project Files" />
+      <option name="scopeName" value="Minify CSS" />
       <option name="trackOnlyRoot" value="true" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
diff --git a/anym-utility.css b/anym-utility.css
index b2c0319..ad02c53 100644
--- a/anym-utility.css
+++ b/anym-utility.css
@@ -144,6 +144,46 @@
   flex-basis: 300px;
 }
 
+.flex-basis-310 {
+  flex-basis: 310px;
+}
+
+.flex-basis-320 {
+  flex-basis: 320px;
+}
+
+.flex-basis-330 {
+  flex-basis: 330px;
+}
+
+.flex-basis-340 {
+  flex-basis: 340px;
+}
+
+.flex-basis-350 {
+  flex-basis: 350px;
+}
+
+.flex-basis-360 {
+  flex-basis: 360px;
+}
+
+.flex-basis-370 {
+  flex-basis: 370px;
+}
+
+.flex-basis-380 {
+  flex-basis: 380px;
+}
+
+.flex-basis-390 {
+  flex-basis: 390px;
+}
+
+.flex-basis-400 {
+  flex-basis: 400px;
+}
+
 .basis {
   flex-basis: 100px;
 }
@@ -189,7 +229,7 @@
 }
 
 .gap {
-  gap: 10px;
+  gap: 10;
 }
 
 .align-center {
diff --git a/anym-utility.css.map b/anym-utility.css.map
index f7c5149..2537cd6 100644
--- a/anym-utility.css.map
+++ b/anym-utility.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["utils/flex/_flexbox.scss","abstracts/_mixins.scss","utils/flex/_basis.scss","utils/flex/_gap.scss","utils/flex/_align.scss"],"names":[],"mappings":"AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EClBA;EACA;EACA;;;ACPA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACNA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACRA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE","file":"anym-utility.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["utils/flex/_flexbox.scss","abstracts/_mixins.scss","utils/flex/_basis.scss","utils/flex/_gap.scss","utils/flex/_align.scss"],"names":[],"mappings":"AAGE;EACE;;AAEA;EACE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;ECnBF;EACA;EACA;;;ACLE;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACNA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACRA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE","file":"anym-utility.css"}
\ No newline at end of file
diff --git a/anym-utility.min.css b/anym-utility.min.css
index 8ff8d05..dc25c16 100644
--- a/anym-utility.min.css
+++ b/anym-utility.min.css
@@ -1 +1 @@
-.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow{flex-grow:1}.flex-column,.flex-row{display:flex;flex-direction:column}.flex-row{flex-direction:row}.flex-center{display:flex;justify-content:center;align-items:center}.flex-basis-10{flex-basis:10px}.flex-basis-20{flex-basis:20px}.flex-basis-30{flex-basis:30px}.flex-basis-40{flex-basis:40px}.flex-basis-50{flex-basis:50px}.flex-basis-60{flex-basis:60px}.flex-basis-70{flex-basis:70px}.flex-basis-80{flex-basis:80px}.flex-basis-90{flex-basis:90px}.flex-basis-100{flex-basis:100px}.flex-basis-110{flex-basis:110px}.flex-basis-120{flex-basis:120px}.flex-basis-130{flex-basis:130px}.flex-basis-140{flex-basis:140px}.flex-basis-150{flex-basis:150px}.flex-basis-160{flex-basis:160px}.flex-basis-170{flex-basis:170px}.flex-basis-180{flex-basis:180px}.flex-basis-190{flex-basis:190px}.flex-basis-200{flex-basis:200px}.flex-basis-210{flex-basis:210px}.flex-basis-220{flex-basis:220px}.flex-basis-230{flex-basis:230px}.flex-basis-240{flex-basis:240px}.flex-basis-250{flex-basis:250px}.flex-basis-260{flex-basis:260px}.flex-basis-270{flex-basis:270px}.flex-basis-280{flex-basis:280px}.flex-basis-290{flex-basis:290px}.flex-basis-300{flex-basis:300px}.basis{flex-basis:100px}.gap-5{gap:5px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.gap-25{gap:25px}.gap-30{gap:30px}.gap-35{gap:35px}.gap-40{gap:40px}.gap-45{gap:45px}.gap-50{gap:50px}.gap{gap:10px}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
\ No newline at end of file
+.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow{flex-grow:1}.flex-column,.flex-row{display:flex;flex-direction:column}.flex-row{flex-direction:row}.flex-center{display:flex;justify-content:center;align-items:center}.flex-basis-10{flex-basis:10px}.flex-basis-20{flex-basis:20px}.flex-basis-30{flex-basis:30px}.flex-basis-40{flex-basis:40px}.flex-basis-50{flex-basis:50px}.flex-basis-60{flex-basis:60px}.flex-basis-70{flex-basis:70px}.flex-basis-80{flex-basis:80px}.flex-basis-90{flex-basis:90px}.flex-basis-100{flex-basis:100px}.flex-basis-110{flex-basis:110px}.flex-basis-120{flex-basis:120px}.flex-basis-130{flex-basis:130px}.flex-basis-140{flex-basis:140px}.flex-basis-150{flex-basis:150px}.flex-basis-160{flex-basis:160px}.flex-basis-170{flex-basis:170px}.flex-basis-180{flex-basis:180px}.flex-basis-190{flex-basis:190px}.flex-basis-200{flex-basis:200px}.flex-basis-210{flex-basis:210px}.flex-basis-220{flex-basis:220px}.flex-basis-230{flex-basis:230px}.flex-basis-240{flex-basis:240px}.flex-basis-250{flex-basis:250px}.flex-basis-260{flex-basis:260px}.flex-basis-270{flex-basis:270px}.flex-basis-280{flex-basis:280px}.flex-basis-290{flex-basis:290px}.flex-basis-300{flex-basis:300px}.flex-basis-310{flex-basis:310px}.flex-basis-320{flex-basis:320px}.flex-basis-330{flex-basis:330px}.flex-basis-340{flex-basis:340px}.flex-basis-350{flex-basis:350px}.flex-basis-360{flex-basis:360px}.flex-basis-370{flex-basis:370px}.flex-basis-380{flex-basis:380px}.flex-basis-390{flex-basis:390px}.flex-basis-400{flex-basis:400px}.basis{flex-basis:100px}.gap-5{gap:5px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.gap-25{gap:25px}.gap-30{gap:30px}.gap-35{gap:35px}.gap-40{gap:40px}.gap-45{gap:45px}.gap-50{gap:50px}.gap{gap:10}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
\ No newline at end of file
diff --git a/anym-utility.scss b/anym-utility.scss
index 826735c..0c90bcd 100644
--- a/anym-utility.scss
+++ b/anym-utility.scss
@@ -1,2 +1,7 @@
 @forward 'abstracts/mixins';
-@forward 'utils';
\ No newline at end of file
+@use 'utils';
+
+@include utils.flexbox();
+@include utils.flex-basis();
+@include utils.flex-gap();
+@include utils.flex-align();
\ No newline at end of file
diff --git a/core.scss b/core.scss
new file mode 100644
index 0000000..826735c
--- /dev/null
+++ b/core.scss
@@ -0,0 +1,2 @@
+@forward 'abstracts/mixins';
+@forward 'utils';
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 99d24ed..271db0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,349 @@
 {
   "name": "anym-utility-css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "anym-utility-css",
-      "version": "1.0.0",
-      "license": "ISC"
+      "version": "1.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "sass": "^1.62.1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    }
+  },
+  "dependencies": {
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5a7dffc..4fe4a2f 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,8 @@
   "publishConfig": {
     "access": "public",
     "@anymfah:registry": "https://npm.pkg.github.com/"
+  },
+  "dependencies": {
+    "sass": "^1.62.1"
   }
 }
diff --git a/utils/flex/_align.scss b/utils/flex/_align.scss
index 53d0737..168da28 100644
--- a/utils/flex/_align.scss
+++ b/utils/flex/_align.scss
@@ -1,32 +1,35 @@
-.align {
-  &-center {
-    align-items: center;
-  }
-  &-start {
-    align-items: flex-start;
-  }
-  &-end {
-    align-items: flex-end;
-  }
-  &-stretch {
-    align-items: stretch;
-  }
-}
 
-.justify {
-  &-center {
-    justify-content: center;
+@mixin flex-align {
+  .align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-stretch {
+      align-items: stretch;
+    }
   }
-  &-start {
-    justify-content: flex-start;
-  }
-  &-end {
-    justify-content: flex-end;
-  }
-  &-between {
-    justify-content: space-between;
-  }
-  &-around {
-    justify-content: space-around;
+
+  .justify {
+    &-center {
+      justify-content: center;
+    }
+    &-start {
+      justify-content: flex-start;
+    }
+    &-end {
+      justify-content: flex-end;
+    }
+    &-between {
+      justify-content: space-between;
+    }
+    &-around {
+      justify-content: space-around;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/utils/flex/_basis.scss b/utils/flex/_basis.scss
index 39c67c2..7c1327f 100644
--- a/utils/flex/_basis.scss
+++ b/utils/flex/_basis.scss
@@ -1,11 +1,14 @@
 
-@for $i from 1 through 30 {
-  $val: $i * 10;
-  .flex-basis-#{$val} {
-    flex-basis: #{$val}px;
+@mixin flex-basis($max: 400) {
+  $max: $max / 10;
+  @for $i from 1 through $max {
+    $val: $i * 10;
+    .flex-basis-#{$val} {
+      flex-basis: #{$val}px;
+    }
   }
-}
 
-.basis {
-  flex-basis: 100px;
-}
\ No newline at end of file
+  .basis {
+    flex-basis: 100px;
+  }
+}
diff --git a/utils/flex/_flexbox.scss b/utils/flex/_flexbox.scss
index ce51b4c..17cb05f 100644
--- a/utils/flex/_flexbox.scss
+++ b/utils/flex/_flexbox.scss
@@ -1,30 +1,32 @@
 @use '../../abstracts/mixins';
 
-.flex {
-  display: flex;
+@mixin flexbox() {
+  .flex {
+    display: flex;
 
-  &-wrap {
-    flex-wrap: wrap;
-  }
+    &-wrap {
+      flex-wrap: wrap;
+    }
 
-  &-nowrap {
-    flex-wrap: nowrap;
-  }
-  &-grow {
-    flex-grow: 1;
-  }
+    &-nowrap {
+      flex-wrap: nowrap;
+    }
+    &-grow {
+      flex-grow: 1;
+    }
 
-  &-column {
-    display: flex;
-    flex-direction: column;
-  }
+    &-column {
+      display: flex;
+      flex-direction: column;
+    }
 
-  &-row {
-    display: flex;
-    flex-direction: row;
-  }
+    &-row {
+      display: flex;
+      flex-direction: row;
+    }
 
-  &-center {
-    @include mixins.centered;
+    &-center {
+      @include mixins.centered;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/utils/flex/_gap.scss b/utils/flex/_gap.scss
index 7ecdaed..f10be9f 100644
--- a/utils/flex/_gap.scss
+++ b/utils/flex/_gap.scss
@@ -1,11 +1,14 @@
 
-@for $i from 1 through 10 {
-  $val: $i * 5;
-  .gap-#{$val} {
-    gap: #{$val}px;
+@mixin flex-gap($max: 50, $steps: 5) {
+  $max: $max / $steps;
+  @for $i from 1 through $max {
+    $val: $i * $steps;
+    .gap-#{$val} {
+      gap: #{$val}px;
+    }
   }
-}
 
-.gap {
-  gap: 10px;
-}
\ No newline at end of file
+  .gap {
+    gap: $steps * 2;
+  }
+}