aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/lib/css-vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/lib/css-vars.scss')
-rw-r--r--src/sass/lib/css-vars.scss31
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};