css custom-properties + scss : https://www.sassmeister.com/gist/50bf20313ddf2aaf7e798dc1806eafab

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="text">
  
  <p>Texte</p>
</div>

<div class="color-variables">
  
  <p class="left">Texte</p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// MDN : custom properties : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
// https://github.com/oddbird/accoutrement/blob/master/sass/core/_css-vars.scss
// https://www.smashingmagazine.com/2015/08/understanding-critical-css/
// https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/

$_colors:(

);
$breakpoints: (
  x-small: 320px,
  small: 480px,
  medium: 780px,
  large: 960px,
  x-large: 1200px
);

$_sizes:(
 
);

$_types:(
  _global-line-height: 1.2,
  base-font-family: "'Open Sans', sans-serif",
);

// test if a map key is private (begin with a _ ) or public 
// @function _is-private
// 
// @param {string} - a map key as string 
// @return {bool}  - return false if public 
@function _is-private($string){
  $prefix: '_';
  @if(type-of($string) != string){
    @error "parameter `#{$string}` must be a string (" + type-of($string) + ")";
  }
  @if (str-index($string,$prefix) == 1){
    @return true;
  }
  @return false;
}

// @function cssvar--
// @param $map {map} - a parametter map
// @param $variable {string} - key in the map
// @param $fallback {} - fallback value if css custom propertie fails
// @return - a css custom propertie definition eg. `var(--propertie, falback,value)`
@function cssvar--($map,$variable,$fallback: null){
  $propertie: map-get($map, $variable);
  @if $propertie == null{
    @error "No variable : `#{$variable}` found ";
  }
  @if $fallback {
    @return var(--#{$variable}, $fallback);
  }
  @return var(--#{$variable});
}

// css rule and variable value with fallback for old browsers 
// 
// @param $map {map}  - a variable map
// @param $key {string}  - item in map
// @param $csspropertie {string} - a css propertie  
@mixin cssvar--($map, $key, $csspropertie, $fallback: null){
  // legacy support
  #{$csspropertie}: unquote(map-get($map,$key)) ;
  // custom-props
  #{$csspropertie}: cssvar--($map,$key,unquote($fallback));
}

// @mixin customprops
// render map settings as css custom properties
// ignoring privates configurations
// 
// @param $map {map}  - a variable map
// @param $prefix {string} (null !) - additional namespacing prefix added to the css custom properties
// @return {string}   - render all items in map as css customs properties
@mixin customprops($map,$prefix: null){
  @each $var,$value in $map {
    @if (_is-private($var) == false){
      @if $prefix{
        $var: #{$prefix}-#{$var};
      }
      --#{$var}: #{$value};
    }
  }
}

// ---------------------------------------------------
// OUTPUT
// ---------------------------------------------------

:root{
  @include customprops($_types);
  @include customprops($breakpoints, bp);
}

// String functions in sass
// str-slice($string, $start-at, [$end-at])
// 
// https://css-tricks.com/snippets/sass/str-replace-function/
// 
.string{
  /* _is-private(base-font) */
  value: _is-private(base-font);
  /* str-slice('test', 1, 1) */
  value:  str-slice('test', 1, 1); // t
  /* str-index('test', 'e') */
  value:  str-index('test', 'e'); // 2
}

// use cssvar function
p{
   font-family: cssvar--($_types,base-font-family, system-ui);
}

// use cssvar mixin
p{
  @include cssvar--($_types,base-font-family, font-family,'system-ui, sans-serif')
}

SassMeister-output.css

:root {
  --base-font-family: 'Open Sans', sans-serif;
  --bp-x-small: 320px;
  --bp-small: 480px;
  --bp-medium: 780px;
  --bp-large: 960px;
  --bp-x-large: 1200px;
}

.string {
  /* _is-private(base-font) */
  value: false;
  /* str-slice('test', 1, 1) */
  value: "t";
  /* str-index('test', 'e') */
  value: 2;
}

p {
  font-family: var(--base-font-family, system-ui);
}

p {
  font-family: 'Open Sans', sans-serif;
  font-family: var(--base-font-family, system-ui, sans-serif);
}

SassMeister-rendered.html

<div class="text">
  
  <p>Texte</p>
</div>

<div class="color-variables">
  
  <p class="left">Texte</p>
</div>