Auto generate css variables by SASS function

Question

I want to ask how I can auto-generate css variable by sass function

for example: I want this variable to auto-generate

:root{--sample1:red;}

SASS function:

@function brand($key,$val) {
 //this not works  
 :root{
    --#{$key}:$val;
  }
@return val(--#{$val});}

use the brand function

   header{
       background-color:brand("sample1",red)
   }

Answer 1

I achieved something similar, here is the idea.

$spacing: (
  none: none,
  01: 4px,
  02: 8px,
  03: 16px,
  04: 24px,
  05: 32px,
  06: 40px,
  07: 48px,
  08: 56px,
  09: 64px,
  10: 72px,
  11: 80px,
  12: 88px,
  13: 96px
);

:root {
  // SPACING Custom Properties
  @each $space, $value in $spacing {
    --spacing-#{$space}: #{$value};
  }
}