title: css less adding a variable to the selector
body: <p>I'm a LESS newbie just trying to use it initally to remove some duplication form my stylessheets. I'm trying to add a variable to a (relatively) complex selector in less 1.2.21 using the following code:</p>
  
  <pre><code>@current_house_id: 97;
  ul#house-family-menu li#menu-item-@current_house_id {
      background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
  }
  </code></pre>
  
  <p>For the avoidance of doubt the original css would have been:</p>
  
  <pre><code>ul#house-family-menu li#menu-item-97 {
      background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
  }
  </code></pre>
  
  <p>When I compile this with lessc I get error:</p>
  
  <blockquote>
    <p>Syntax Error: on line 268: expected one of [ ( . # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item-</p>
  </blockquote>
  
  <p>I've tried various escaping mechanisms suggested here and elsewhere but nothing seems to work, perhaphs this isn't supported in less? If it isn't I guess I could do the less equivlent of a case on ul#house-family-menu li#menu-item and apply the items one at a time?</p>
  
  <p>Any help much appreciated.</p>