diff options
Diffstat (limited to 'src/sass/lib/css-vars.scss')
-rw-r--r-- | src/sass/lib/css-vars.scss | 31 |
1 files changed, 17 insertions, 14 deletions
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index fb30f3a7..cb3da879 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -1,5 +1,8 @@ // Downloaded from https://github.com/malyw/css-vars (and modified) +@use 'sass:list'; +@use 'sass:map'; + // global map to be filled via variables $css-vars: (); @@ -21,36 +24,35 @@ $css-vars-use-native: false !default; /// // Emulates var() CSS native function behavior -// // $args[0] {String} "--" + variable name // [$args[1]] Optional default value if variable is not assigned yet -// // E.G.: // color: var(--main-color); // background: var(--main-background, green); /// @function var($args...) { // CHECK PARAMS - @if (length($args) ==0) { + @if length($args) == 0 { @error 'Variable name is expected to be passed to the var() function'; } - @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') { + + @if str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--' { @error "Variable name is expected to start from '--'"; } // PROCESS - $var-name: nth($args, 1); - $var-value: map-get($css-vars, $var-name); + $var-name: list.nth($args, 1); + $var-value: map.get($css-vars, $var-name); - @if ($css-vars-use-native) { + @if $css-vars-use-native { // CSS variables // Native CSS: don't process function in case of native @return unquote('var(' + $args + ')'); } @else { - @if ($var-value == null) { + @if not $var-value { // variable is not provided so far - @if (length($args) == 2) { - $var-value: nth($args, 2); + @if length($args) == 2 { + $var-value: list.nth($args, 2); } } @@ -70,20 +72,21 @@ $css-vars-use-native: false !default; /// @mixin css-vars($var-map: null) { // CHECK PARAMS - @if ($var-map == null) { + @if not $var-map { @error 'Map of variables is expected, instead got: null'; } - @if (type_of($var-map) != map) { + + @if type_of($var-map) != map { @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; } // PROCESS - @if ($css-vars-use-native) { + @if $css-vars-use-native { // CSS variables // Native CSS: assign CSS custom properties to the global scope @at-root :root { @each $var-name, $var-value in $var-map { - @if (type_of($var-value) == string) { + @if type_of($var-value) == string { #{$var-name}: $var-value; // to prevent quotes interpolation } @else { #{$var-name}: #{$var-value}; |