title: `@each` loop in Sass to declare dynamic id?
body: <p>I have the following Sass code:</p>
  
  <pre><code>@each $message_color in red, blue, black {
      .#{$message_color}-font-color{
          color: $message_color;
      }
  }
  </code></pre>
  
  <p>and the result is </p>
  
  <pre><code>/* line 2, ../sass/styles.scss */ 
  .red-font-color { color: red; }
  
  /* line 2, ../sass/styles.scss */ 
  .blue-font-color { color: blue; }
  
  /* line 2, ../sass/styles.scss */ 
  .black-font-color { color: black; }
  </code></pre>
  
  <p>My question now, how can I create this result </p>
  
  <pre><code>/* line 2, ../sass/styles.scss */
  #red-font-color { color: red; }
  
  /* line 2, ../sass/styles.scss */
  #blue-font-color { color: blue; }
  
  /* line 2, ../sass/styles.scss */
  #black-font-color { color: black; }
  </code></pre>
  
  <p>I need generate an <code># selector</code> not <code>class selector</code>...</p>