title: @for directive issue when creating .grid.column classes
body: <p>I am creating a grid layout using SCSS—specifically a <code>@for</code> directive in SCSS.</p>
  
  <p>It's also important to note that I'm using numeric classes in my markup with the help of css escapes.</p>
  
  <p>Here is my SCSS:</p>
  
  <pre><code>$columns: 12;
  $column: 100% / $columns;
  
  @for $i from 1 through $columns {
    @if $i == 10 {
      $i: 1 0;
    } @else if $i == 11 {
      $i: 1 1;
    } @else if $i == 12 {
      $i: 1 2;
    }
  
    .row .\3#{$i} .columns {
      width: $column * $columns;
    }
  }
  </code></pre>
  
  <p>This compiles to the following:</p>
  
  <pre><code>.row .\31 .columns {
    width: 100%;
  }
  .row .\32 .columns {
    width: 100%;
  }
  .row .\33 .columns {
    width: 100%;
  }
  .row .\34 .columns {
    width: 100%;
  }
  .row .\35 .columns {
    width: 100%;
  }
  .row .\36 .columns {
    width: 100%;
  }
  .row .\37 .columns {
    width: 100%;
  }
  .row .\38 .columns {
    width: 100%;
  }
  .row .\39 .columns {
    width: 100%;
  }
  .row .\31 0 .columns {
    width: 100%;
  }
  .row .\31 1 .columns {
    width: 100%;
  }
  .row .\31 2 .columns {
    width: 100%;
  }
  </code></pre>
  
  <p>My problem is with classes <code>.10</code>, <code>.11</code> and <code>.12</code>. As I have added the required space with an <code>@if</code> after the first number (as is usually required with css escapes), I now need to remove the second space after the second number. Is this possible in Sass/SCSS?</p>
  
  <p>So if this was functioning as I wanted, single number classes would be written like so:</p>
  
  <pre><code>.row .\31 .columns { width: 100%; }
  </code></pre>
  
  <p>and multiple number classes would be written like so:</p>
  
  <pre><code>.row .\31 2.columns { width: 100%; }
  </code></pre>
  
  <p>I am aware that the css isn't particularly efficient when compiled. What I am really seeking in an answer is what is and is not possible with SCSS. </p>