Generated by SassMeister.com.

input.scss

@use 'sass:string';
@use 'sass:meta';

@function var-if($cond-var, $true-val, $false-val) {
    $id: string.unique-id();
    @return string.unquote('var(--#{$id}, #{$false-val}); --#{$id}: var(#{$cond-var}) #{$true-val}');
}

@function var-toggle($bool) {
    @return if($bool, string.unquote('/*!*/ /*!*/'), initial);
}

@mixin var-toggle($var, $bool) {
    #{$var}: if($bool, string.unquote('/*!*/ /*!*/'), initial);
}

:root {
    --is-bg-dark: #{var-toggle(false)};
}
.bg-pink {
    --bg-rgb: pink;
    --is-bg-dark: #{var-toggle(false)};
}
.bg-blue {
    --bg-rgb: blue;
    --is-bg-dark: #{var-toggle(true)};
    --bg-tone-max: rgb(230,230,255);
    --bg-tone-min: rgb(0,0,15);
}
[class*=bg-] {
    --bg-con-if-dark: var(--is-bg-dark) white;
    --bg-con: var(--bg-con-if-dark, black);
}

.test {
    --is-big: #{var-toggle(true)};
    test: var-if(--is-big, 200px, 400px);
    background-color: var(--bg-rgb);
    width: 200px;
    width: var-if(--is-bg-dark, 200px, 400px);
    height: 200px;
    color: var(--bg-con);
}

markup.pug

.test.bg-pink 
    p hello world
    p.fg-tone-2 hello world
.test.bg-blue 
    p hello world
    p.fg-tone-2 hello world

output.css

:root {
  --is-bg-dark: initial;
}

.bg-pink {
  --bg-rgb: pink;
  --is-bg-dark: initial;
}

.bg-blue {
  --bg-rgb: blue;
  --is-bg-dark: /*!*/ /*!*/;
  --bg-tone-max: rgb(230,230,255);
  --bg-tone-min: rgb(0,0,15);
}

[class*=bg-] {
  --bg-con-if-dark: var(--is-bg-dark) white;
  --bg-con: var(--bg-con-if-dark, black);
}

.test {
  --is-big: /*!*/ /*!*/;
  test: var(--ukn6a3y, 400px); --ukn6a3y: var(--is-big) 200px;
  background-color: var(--bg-rgb);
  width: 200px;
  width: var(--ukn6a3z, 400px); --ukn6a3z: var(--is-bg-dark) 200px;
  height: 200px;
  color: var(--bg-con);
}

rendered.html

<div class="test bg-pink"> 
  <p>hello world</p>
  <p class="fg-tone-2">hello world</p>
</div>
<div class="test bg-blue"> 
  <p>hello world</p>
  <p class="fg-tone-2">hello world</p>
</div>

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}