Skip to main content

How to create a color text css class for each color variable in bootstrap

In Radix - Bootstrap we have in the _variables.sccs the $colors variables

$blue:    #001D4A !default; //ok
$indigo:  #3D348B !default; //ok
$purple:  #662E9B !default; //ok
$pink:    #FFCFD2 !default; //ok
$red:     #7A0302 !default; //ok
$orange:  #FE5D26 !default; //ok
$yellow:  #E3B23C !default; //ok
$green:   #A8C256 !default; //ok
$teal:    #7AE7C7 !default; //ok
$cyan:    #1B9AAA !default; //ok

$colors: () !default;
$colors: map-merge(
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800

Something that i find very handy but is missing is to have the color text css class for all the colors. The below snippet shows how to achieve this.

@each $color_name,$color_value in $colors {
  .text-#{$color_name} {
    color: $color_value !important;

After compiling this i can write css classes like this:

<span class="text-green">Hello world</span> 
<span class="text-indigo">Hello world</span> 
<span class="text-blue">Hello world</span>