css変数も出力できるsass設定

00-sass-color-setting.scss

$theme-colors: (
  primary: #ffffff,
  secondary: #cccccc,
  success: #28a745,
  info: #aaaaaa,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);
body{
  @each $key, $color in $theme-colors {
    --c-#{$key}: #{$color};
  }
}
@function c($color_name){
  @return var(--c-#{color_name});
}

01-main.scss

// 使用例
.hoge {
  color: c(primary)
}