Generated by SassMeister.com.

input.scss

$colors: (
    "primary": #FAFEFF,
);

@each $key, $val in $colors {
    .text-#{$key} {
        color: $val;
    }
    
    @for $i from 1 through 9 {
        .text-#{$key}-#{$i}00 {
            color: mix(black, $val, $i * 10);
        }
    }
}

output.css

.text-primary {
  color: #FAFEFF;
}

.text-primary-100 {
  color: #e1e5e6;
}

.text-primary-200 {
  color: #c8cbcc;
}

.text-primary-300 {
  color: #afb2b3;
}

.text-primary-400 {
  color: #969899;
}

.text-primary-500 {
  color: #7d7f80;
}

.text-primary-600 {
  color: #646666;
}

.text-primary-700 {
  color: #4b4c4d;
}

.text-primary-800 {
  color: #323333;
}

.text-primary-900 {
  color: #19191a;
}

settings.json

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