From 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 May 2018 13:37:10 +1000 Subject: WIP --- src/sass/lib/css-vars.scss | 131 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 src/sass/lib/css-vars.scss (limited to 'src/sass/lib/css-vars.scss') diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss new file mode 100644 index 00000000..cb251831 --- /dev/null +++ b/src/sass/lib/css-vars.scss @@ -0,0 +1,131 @@ +// Downloaded from https://github.com/malyw/css-vars + +//// VARIABLES //// + +// global map to be filled via variables +$css-vars: (); + +// the variable may be set to "true" anywhere in the code, +// so native CSS custom properties will be used instead of the Sass global map +$css-vars-use-native: false !default; + +// enables the output of debug messages +$css-vars-debug-log: false !default; + +//// FUNCTIONS //// + +/// +// Assigns a variable to the global map +/// +@function _cssVarAssign($varName: null, $varValue: null) { + // CHECK PARAMS + @if ($varName==null) { + @error 'Variable name is expected, instead got: null'; + } + @if ($varValue==null) { + @error 'Variable value is expected, instead got: null'; + } + + // assign to the global map + @if ($css-vars-debug-log and map-get($css-vars, $varName)) { + @debug "'#{$varName}' variable is reassigned"; + } + + @return map-merge($css-vars, ($varName: $varValue)); +} + +/// +// 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-bg, green); +/// +@function var($args...) { + // CHECK PARAMS + @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) != '--') { + @error "Variable name is expected to start from '--'"; + } + + // PROCESS + $varName: nth($args, 1); + $varValue: map-get($css-vars, $varName); + + @if ($css-vars-debug-log or not $css-vars-use-native) { + // Sass or debug + @if ($varValue==null) { + // variable is not provided so far + @if (length($args) ==2) { + // the default value is passed + @if ($css-vars-debug-log) { + @debug "Provided default value is used for the variable: '#{$varName}'"; + } + $varValue: nth($args, 2); + } @else if ($css-vars-debug-log) { + @debug "Variable '#{$varName}' is not assigned"; + @if (not $css-vars-use-native) { + @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS"; + } + } + } + } + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: don't process function in case of native + @return unquote('var(' + $args + ')'); + } @else { + // Sass: return value from the map + @return $varValue; + } +} + +//// MIXIN //// + +/// +// CSS mixin to provide variables +// E.G.: +// @include css-vars(( +// --color: rebeccapurple, +// --height: 68px, +// --margin-top: calc(2vh + 20px) +// )); +/// +@mixin css-vars($varMap: null) { + // CHECK PARAMS + @if ($varMap==null) { + @error 'Map of variables is expected, instead got: null'; + } + @if (type_of($varMap) !=map) { + @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}'; + } + + // PROCESS + @if ($css-vars-debug-log or not $css-vars-use-native) { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $varName, $varValue in $varMap { + $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable + } + } + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: assign CSS custom properties to the global scope + @at-root :root { + @each $varName, $varValue in $varMap { + @if (type_of($varValue) ==string) { + #{$varName}: $varValue; // to prevent quotes interpolation + } @else { + #{$varName}: #{$varValue}; + } + } + } + } +} -- cgit v1.2.3 From 996075decc6e8c0f0c5059dccea21b16020eb78b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 11 Apr 2019 20:50:20 +1000 Subject: More work on variable usage --- src/sass/lib/css-vars.scss | 97 ++++++++++++++++------------------------------ 1 file changed, 33 insertions(+), 64 deletions(-) (limited to 'src/sass/lib/css-vars.scss') diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index cb251831..074c27c1 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -1,6 +1,4 @@ -// Downloaded from https://github.com/malyw/css-vars - -//// VARIABLES //// +// Downloaded from https://github.com/malyw/css-vars (and modified) // global map to be filled via variables $css-vars: (); @@ -9,29 +7,16 @@ $css-vars: (); // so native CSS custom properties will be used instead of the Sass global map $css-vars-use-native: false !default; -// enables the output of debug messages -$css-vars-debug-log: false !default; - -//// FUNCTIONS //// - /// // Assigns a variable to the global map /// -@function _cssVarAssign($varName: null, $varValue: null) { - // CHECK PARAMS - @if ($varName==null) { - @error 'Variable name is expected, instead got: null'; - } - @if ($varValue==null) { - @error 'Variable value is expected, instead got: null'; - } - - // assign to the global map - @if ($css-vars-debug-log and map-get($css-vars, $varName)) { - @debug "'#{$varName}' variable is reassigned"; - } - - @return map-merge($css-vars, ($varName: $varValue)); +@function css-var-assign($varName: null, $varValue: null) { + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); } /// @@ -54,42 +39,28 @@ $css-vars-debug-log: false !default; } // PROCESS - $varName: nth($args, 1); - $varValue: map-get($css-vars, $varName); - - @if ($css-vars-debug-log or not $css-vars-use-native) { - // Sass or debug - @if ($varValue==null) { - // variable is not provided so far - @if (length($args) ==2) { - // the default value is passed - @if ($css-vars-debug-log) { - @debug "Provided default value is used for the variable: '#{$varName}'"; - } - $varValue: nth($args, 2); - } @else if ($css-vars-debug-log) { - @debug "Variable '#{$varName}' is not assigned"; - @if (not $css-vars-use-native) { - @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS"; - } - } - } - } + $var-name: nth($args, 1); + $var-value: map-get($css-vars, $var-name); @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) { + // variable is not provided so far + @if (length($args) == 2) { + $var-value: nth($args, 2); + } + } + // Sass: return value from the map - @return $varValue; + @return $var-value; } } -//// MIXIN //// - /// -// CSS mixin to provide variables +// SASS mixin to provide variables // E.G.: // @include css-vars(( // --color: rebeccapurple, @@ -97,35 +68,33 @@ $css-vars-debug-log: false !default; // --margin-top: calc(2vh + 20px) // )); /// -@mixin css-vars($varMap: null) { +@mixin css-vars($var-map: null) { // CHECK PARAMS - @if ($varMap==null) { + @if ($var-map == null) { @error 'Map of variables is expected, instead got: null'; } - @if (type_of($varMap) !=map) { - @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}'; + @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-debug-log or not $css-vars-use-native) { - // Sass or debug - // merge variables and values to the global map (provides no output) - @each $varName, $varValue in $varMap { - $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable - } - } - @if ($css-vars-use-native) { // CSS variables // Native CSS: assign CSS custom properties to the global scope @at-root :root { - @each $varName, $varValue in $varMap { - @if (type_of($varValue) ==string) { - #{$varName}: $varValue; // to prevent quotes interpolation + @each $var-name, $var-value in $var-map { + @if (type_of($var-value) == string) { + #{$var-name}: $var-value; // to prevent quotes interpolation } @else { - #{$varName}: #{$varValue}; + #{$var-name}: #{$var-value}; } } } + } @else { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $var-name, $var-value in $var-map { + $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable + } } } -- cgit v1.2.3 From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 11 Apr 2020 16:23:14 +1000 Subject: Converted to 2 space indentation --- src/sass/lib/css-vars.scss | 110 ++++++++++++++++++++++----------------------- 1 file changed, 55 insertions(+), 55 deletions(-) (limited to 'src/sass/lib/css-vars.scss') diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index 493df3a8..fb30f3a7 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -11,12 +11,12 @@ $css-vars-use-native: false !default; // Assigns a variable to the global map /// @function css-var-assign($varName: null, $varValue: null) { - @return map-merge( - $css-vars, - ( - $varName: $varValue, - ) - ); + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); } /// @@ -30,33 +30,33 @@ $css-vars-use-native: false !default; // background: var(--main-background, green); /// @function var($args...) { - // CHECK PARAMS - @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) != '--') { - @error "Variable name is expected to start from '--'"; - } + // CHECK PARAMS + @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) != '--') { + @error "Variable name is expected to start from '--'"; + } - // PROCESS - $var-name: nth($args, 1); - $var-value: map-get($css-vars, $var-name); + // PROCESS + $var-name: nth($args, 1); + $var-value: map-get($css-vars, $var-name); - @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) { - // variable is not provided so far - @if (length($args) == 2) { - $var-value: nth($args, 2); - } - } - - // Sass: return value from the map - @return $var-value; + @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) { + // variable is not provided so far + @if (length($args) == 2) { + $var-value: nth($args, 2); + } } + + // Sass: return value from the map + @return $var-value; + } } /// @@ -69,32 +69,32 @@ $css-vars-use-native: false !default; // )); /// @mixin css-vars($var-map: null) { - // CHECK PARAMS - @if ($var-map == null) { - @error 'Map of variables is expected, instead got: null'; - } - @if (type_of($var-map) != map) { - @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; - } + // CHECK PARAMS + @if ($var-map == null) { + @error 'Map of variables is expected, instead got: null'; + } + @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) { - // 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) { - #{$var-name}: $var-value; // to prevent quotes interpolation - } @else { - #{$var-name}: #{$var-value}; - } - } - } - } @else { - // Sass or debug - // merge variables and values to the global map (provides no output) - @each $var-name, $var-value in $var-map { - $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable + // PROCESS + @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) { + #{$var-name}: $var-value; // to prevent quotes interpolation + } @else { + #{$var-name}: #{$var-value}; } + } + } + } @else { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $var-name, $var-value in $var-map { + $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable } + } } -- cgit v1.2.3