Generated by SassMeister.com.

input.scss

@use "sass:meta";

/**
* Use this mixin to declare a set of CSS Custom Properties.
* The variables in $css_variables will be properly prefixed.
* The use of this mixin is encouraged to keep a good scalability.
*/
@mixin cssvars($css_variables, $prefix: rt) {
	:root {
		@each $name, $value in $css_variables {
			--#{$prefix}-#{$name}: #{$value};
		}
	}
}

/**
* This mixin is used to change a CSS property value.
* It will change a declared css variable auto-prefixing it.
*/
@mixin cssvar($name, $prefix: rt, $value: '') {
	--#{$prefix}-#{$name}: #{$value};
}

/**
* Retrieve a css variable value with already auto-prefixed.
* Use the mixin if you want to change the variable value.
*/
@function cssvar($name, $prefix: rt) {
	@return var(--#{$prefix}-#{$name});
}

$primary-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
$global-font-size: 16px !default;

@include cssvars((
    app-surface-color: transparent,
    font-family-primary: #{meta.inspect($primary-font-family)},
    global-font-size: #{$global-font-size}
));

body {
    background-color: cssvar(app-surface-color);
}

output.css

/**
* Use this mixin to declare a set of CSS Custom Properties.
* The variables in $css_variables will be properly prefixed.
* The use of this mixin is encouraged to keep a good scalability.
*/
/**
* This mixin is used to change a CSS property value.
* It will change a declared css variable auto-prefixing it.
*/
/**
* Retrieve a css variable value with already auto-prefixed.
* Use the mixin if you want to change the variable value.
*/
:root {
  --rt-app-surface-color: transparent;
  --rt-font-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --rt-global-font-size: 16px;
}

body {
  background-color: var(--rt-app-surface-color);
}

settings.json

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