title: CSS rule for classes with number greater than
body: <p>My stylesheet looks like this:</p>
  
  <pre><code>.thing-1 { background-image: url('top.png'); }
  .thing-2 { background-image: url('top.png'); }
  .thing-3 { background-image: url('top.png'); }
  /* etc... */
  </code></pre>
  
  <p>Followed by this:</p>
  
  <pre><code>.thing-20 { background-image: url('bottom.png'); }
  .thing-21 { background-image: url('bottom.png'); }
  .thing-22 { background-image: url('bottom.png'); }
  /* etc... */
  </code></pre>
  
  <p>I am looking for a way to simplify my stylesheet with LESS or something similar. Here's what I'd like to do:</p>
  
  <pre><code>.thing-[i &lt; 15] { background-image: url('top.png'); }
  .thing-[i &gt;= 15] { background-image: url('bottom.png'); }
  </code></pre>
  
  <p>Is there a way I can do something like this with LESS? If not LESS, maybe SASS?</p>