diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:11:00 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:52:23 +0200 |
| commit | 3a3baddad1c801d77dc398d2c6980f3c14f4a47c (patch) | |
| tree | 9e06aef730504470111c010e53a1857f7b01ab83 /src/scss/abstracts/functions | |
| parent | c3045b163e74b42c0a0e71c646740c76d3bb5ba1 (diff) | |
chore: move htdocs to repo root
Diffstat (limited to 'src/scss/abstracts/functions')
| -rw-r--r-- | src/scss/abstracts/functions/_convert.scss | 16 | ||||
| -rw-r--r-- | src/scss/abstracts/functions/_css-vars.scss | 8 | ||||
| -rw-r--r-- | src/scss/abstracts/functions/_encode.scss | 14 | ||||
| -rw-r--r-- | src/scss/abstracts/functions/_str-replace.scss | 20 |
4 files changed, 58 insertions, 0 deletions
diff --git a/src/scss/abstracts/functions/_convert.scss b/src/scss/abstracts/functions/_convert.scss new file mode 100644 index 0000000..9f51dc7 --- /dev/null +++ b/src/scss/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/scss/abstracts/functions/_css-vars.scss b/src/scss/abstracts/functions/_css-vars.scss new file mode 100644 index 0000000..89e1a15 --- /dev/null +++ b/src/scss/abstracts/functions/_css-vars.scss @@ -0,0 +1,8 @@ +/// Retrieve a CSS variable value with prefix +/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 +/// @param {String} $name Variable name +/// @param {String} $prefix Variable prefix +/// @return {String} Variable in CSS format +@function get-var($name, $prefix: dap) { + @return var(--#{$prefix}-#{$name}); +} diff --git a/src/scss/abstracts/functions/_encode.scss b/src/scss/abstracts/functions/_encode.scss new file mode 100644 index 0000000..4350185 --- /dev/null +++ b/src/scss/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/scss/abstracts/functions/_str-replace.scss b/src/scss/abstracts/functions/_str-replace.scss new file mode 100644 index 0000000..624bf33 --- /dev/null +++ b/src/scss/abstracts/functions/_str-replace.scss @@ -0,0 +1,20 @@ +/// 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: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); + } + + @return $string; +} |
