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.

@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} {
    &:hover {
      color: color($color, $lightness: -5%);
    &:visited {
      color: color($color, $lightness: +5%);

Last updated