title: Semantic-UI text colors method
body: <p>Semantic-UI doesn't have a good method for colouring text.</p>
  
  <p>Maybe we can use this code here: <a href="https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-226047499" rel="nofollow noreferrer">https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-226047499</a>:</p>
  
  <pre><code>@text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
  .text {
      .-(@i: length(@text-colors)) when (@i &gt; 0) {
          @c: extract(@text-colors, @i);
          &amp;.@{c} { color: @@c }
          .-((@i - 1));
      }.-;
  }
  </code></pre>
  
  <p>I really did not even understand it until today because we can not have the text colors.</p>
  
  <p>This code generates this:</p>
  
  <pre><code>.text.white {
    color: #FFFFFF;
  }
  .text.grey {
    color: #CCCCCC;
  }
  .text.black {
    color: #1B1C1D;
  }
  .text.yellow {
    color: #F2C61F;
  }
  ...
  </code></pre>
  
  <p>Is this a good method?</p>
  
  <p>What if we make something like this:</p>
  
  <p><code>&lt;span class="red"&gt;&lt;/span&gt;</code></p>
  
  <p>just <code>red</code> without <code>text</code>?</p>
  
  <p>with this code instead:</p>
  
  <pre><code>@text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
  .-(@i: length(@text-colors)) when (@i &gt; 0) {
    @c: extract(@text-colors, @i);
      &amp;.@{c} { color: @@c }
        .-((@i - 1));
  }.-;
  </code></pre>
  
  <p><strong>The question is for Semantic-UI experts!</strong></p>