title: Associative Array SCSS/SASS
body: <p>I need to convert numbers into words, so:</p>
  
  <ul>
  <li>"1-3" -> "one-third"</li>
  <li>"3-3" -> "three-thirds" </li>
  <li>"2-5" -> "two-fifths"</li>
  </ul>
  
  <p>The numbers are generated in a loop, which should output a bunch of different class names like <code>one-third</code> or <code>one-half</code>:</p>
  
  <pre><code>$number = 3;
  
  @for $i from 1 through $number-1 {
      // some calculations to output those classes: ".one-third", ".two-thirds"
  
      // The following currently outputs class names like ".1-3" and ".2-3"
      .#{$i}-#{$number} {
          // CSS styles
      }
  }
  </code></pre>
  
  <p>I think I need to use two different associative arrays, which in PHP (just as an example) might look like:</p>
  
  <pre><code>$1 = array( 
     "1"=&gt;"one", 
     "2"=&gt;"two", 
     "3"=&gt;"three" 
  );
  
  $2 = array( 
     "1"=&gt;"whole", 
     "2"=&gt;"half", 
     "3"=&gt;"third" 
  );
  </code></pre>
  
  <p>Is it possible in <strong>SASS</strong>/<strong>SCSS</strong> to create associative arrays at all or is there any workaround?</p>