title: Extend from class built by a loop within the same loop
body: <p>I am using a loop to generate a fair amount of background gradients with a different color each. I'm also extending some general styles from a dummy class.</p>
  
  <pre><code>.update-bg-essentials{
      margin: 3px;
      border: 1px solid;
      border-radius: 8px;
      font-weight: 400;
      color: #FFFFFF;
      position: relative;
      padding: 0;
  }
  
  @bg-types: blogpost,ppic,nvideo,pvideo,album,user,comment;
  @bg-colors: @pink,@pink-dark,#5c9c80,#6c779e,#826097,#3dac98,#af9d53;
  
  .generate-bgs(@i: length(@bg-types)) when (@i &gt; 0) {
      @bg-name: extract(@bg-types, @i);
      @bg-color: extract(@bg-colors, @i);
  
      .evt_bg_@{bg-name} {
          &amp;:extend(.update-bg-essentials);
          border-color: @bg-color;
          background: @grey;
          background: -moz-linear-gradient(45deg,  @grey 0%, @bg-color 150%);
          background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@grey), color-stop(150%,@bg-color));
          background: -webkit-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: -o-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: -ms-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{grey}', endColorstr='@{bg-color}',GradientType=1 );
          .update_head {
              background: @bg-color;
          }
      }
      .generate-bgs((@i - 1));
  }
  .generate-bgs;
  </code></pre>
  
  <p>The output looks like this:</p>
  
  <pre><code>.update-bg-essentials,
  .evt_bg_comment,
  
  ...
  
  .evt_bg_blogpost {
    margin: 3px;
    border: 1px solid;
    border-radius: 8px;
    font-weight: 400;
    color: #FFFFFF;
    position: relative;
    padding: 0;
  }
  .evt_bg_comment {
    border-color: #af9d53;
    background: #c6c7c9;
    background: -moz-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c6c7c9), color-stop(150%, #af9d53));
    background: -webkit-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
    background: -o-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
    background: -ms-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
    background: linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6c7c9', endColorstr='#af9d53', GradientType=1);
  }
  .evt_bg_comment .update_head {
    background: #af9d53;
  }
  
  ...
  
  .evt_bg_blogpost {
    border-color: #e1409e;
    background: #c6c7c9;
    background: -moz-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c6c7c9), color-stop(150%, #e1409e));
    background: -webkit-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
    background: -o-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
    background: -ms-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
    background: linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6c7c9', endColorstr='#e1409e', GradientType=1);
  }
  .evt_bg_blogpost .update_head {
    background: #e1409e;
  }
  </code></pre>
  
  <p>This works but it annoys me to have that dummy class in my less code only for the generated classes to extend from.
  So I tried this instead.</p>
  
  <pre><code>@bg-types: blogpost,ppic,nvideo,pvideo,album,user,comment;
  @bg-colors: @pink,@pink-dark,#5c9c80,#6c779e,#826097,#3dac98,#af9d53;
  
  .generate-bgs(@i: length(@bg-types)) when (@i &gt; 0) {
      @bg-name: extract(@bg-types, @i);
      @bg-color: extract(@bg-colors, @i);
  
      .evt_bg_@{bg-name} {
          &amp; when (@i = length(@bg-types)) {
              margin: 3px;
              border: 1px solid;
              border-radius: 8px;
              font-weight: 400;
              color: #FFFFFF;
              position: relative;
              padding: 0;
          }
          &amp; when (@i &lt; length(@bg-types)){
              @extender: extract(@bg-types, length(@bg-types));
              &amp;:extend(.evt_bg_@{extender});
          }
          border-color: @bg-color;
          background: @grey;
          background: -moz-linear-gradient(45deg,  @grey 0%, @bg-color 150%);
          background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@grey), color-stop(150%,@bg-color));
          background: -webkit-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: -o-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: -ms-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          background: linear-gradient(45deg,  @grey 0%,@bg-color 150%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{grey}', endColorstr='@{bg-color}',GradientType=1 );
          .update_head {
              background: @bg-color;
          }
      }
      .generate-bgs((@i - 1));
  }
  .generate-bgs;
  </code></pre>
  
  <p>My approach is to generate the first background with the styles from the dummy class and let the others extend from it. But unfortunately this doesn't work. The extend gets ignored both with the generated class and with it coded in.</p>
  
  <p>Is this because it is not actually there yet?</p>
  
  <p>How can I get this to work without using a dummy class?</p>