# text-color-variant()

The mixin contains the two CSS classes, the class of the name prefixed with `text-`, and prefixed `#{$prefix}-text-` with the given color `$name` that includes the `color` style of the given `$color` CSS variable name, also the class of the same name assigned to tag `a`.

By default, `$prefix` is equal to the globally customizable [`$var-prefix`](https://spectrecss.angular-package.dev/variables/css-variable-name#usdvar-prefix).

{% code title="src/mixins/\_color.scss" %}

```scss
@mixin text-color-variant(
  $name: 'primary',
  $color: 'primary-color',
  $prefix: $var-prefix
) {
  .text-#{$name}, .#{$prefix}-text-#{$name} {
    color: color($color) !important;
  }

  a.text-#{$name}, a.#{$prefix}-text-#{$name} {
    &:focus,
    &:hover {
      color: color($color, $lightness: -5%);
    }
    &:visited {
      color: color($color, $lightness: +5%);
    }
  }
}
```

{% endcode %}