chore: define Sass functions, mixins, placeholders and variables

3 files changed, 52 insertions, 0 deletions

diff --git a/src/styles/abstracts/functions/_convert.scss b/src/styles/abstracts/functions/_convert.scss
new file mode 100644
index 0000000..9f51dc7
--- /dev/null
+++ b/src/styles/abstracts/functions/_convert.scss
@@ -0,0 +1,16 @@
+@use "sass:math";
+
+/// Convert px to rem or em.
+/// @param  {Number} $px Value in px
+/// @param  {String} $to Unit. Either "rem" or "em"
+/// @param  {Number} $standard 1rem (or 1em) = 16px
+/// @return {Number} Value in rem or em
+@function convert-px($px, $to: "rem", $standard: 16) {
+  @if $to == "rem" {
+    @return math.div($px, $standard) + 0rem; // stylelint-disable-line
+  } @else if $to == "em" {
+    @return math.div($px, $standard) + 0em; // stylelint-disable-line
+  } @else {
+    @error "`$to` must be either `rem` or `em`.";
+  }
+}
diff --git a/src/styles/abstracts/functions/_encode.scss b/src/styles/abstracts/functions/_encode.scss
new file mode 100644
index 0000000..4350185
--- /dev/null
+++ b/src/styles/abstracts/functions/_encode.scss
@@ -0,0 +1,14 @@
+@use "str-replace" as fun;
+
+/// Encode a SVG.
+/// @param {String} $svg A complete svg (`<svg>...</svg>`).
+/// @return The encoded svg, ready to use for background-image.
+@function encode-svg($svg) {
+  $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23"));
+
+  @each $char, $encoded in $svg-encoding {
+    $svg: fun.str-replace($svg, $char, $encoded);
+  }
+
+  @return "data:image/svg+xml;utf8," + $svg;
+}
diff --git a/src/styles/abstracts/functions/_str-replace.scss b/src/styles/abstracts/functions/_str-replace.scss
new file mode 100644
index 0000000..98cc4b0
--- /dev/null
+++ b/src/styles/abstracts/functions/_str-replace.scss
@@ -0,0 +1,22 @@
+@use "sass:string";
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        string.slice($string, $index + string.length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}