Semantic Markup and Twitter Bootstrap
===

I have following HTML:

    <!doctype html>
    <html>
    <head>
      <link rel="stylesheet/less" href="assets/stylesheets/style.less" />
      <script src="assets/stylesheets/vendor/less/less-1.3.0.min.js"></script>
    </head>
    <body>
      <nav>
        <ul class="tabs">
            <li class="selected">
              <a href="#">Foo</a>
            </li>
            <li><a href="#">Bar</a></li>
            <li><a href="#">Baz</a></li>
        </ul>
      <nav>
    </body>
    </html>

How should I write my style.less to style the list as Twitter Bootstrap Basic
tabs[http://twitter.github.com/bootstrap/components.html#navs]. The obvious way
to do this, to copy and paste all relevant css: 

$cat style.less

    @import "vendor/bootstrap/less/bootstrap.less";
    
    .tabs {
      // .nav
      margin-left: 0;
      margin-bottom: @baseLineHeight;
      list-style: none;
    
      // common style for tabs and pills
      .clearfix();
    
      // Give the tabs something to sit on
      border-bottom: 1px solid #ddd;
    }
    
    .tabs > li {
      float: left;
    }
    
    // Make links block level
    .tabs > li > a {
      display: block;
    }
    
    .tabs > li > a:hover {
      text-decoration: none;
      background-color: @grayLighter;
    }
    
    // common style for nav-tabs
    .tabs > li > a {
      padding-right: 12px;
      padding-left: 12px;
      margin-right: 2px;
      line-height: 14px; // keeps the overall height an even number
    }
    
    // Make the list-items overlay the bottom border
    .tabs > li {
      margin-bottom: -1px;
    }
    
    // Actual tabs (as links)
    .tabs > li > a {
      padding-top: 8px;
      padding-bottom: 8px;
      line-height: @baseLineHeight;
      border: 1px solid transparent;
      .border-radius(4px 4px 0 0);
      &:hover {
        border-color: @grayLighter @grayLighter #ddd;
      }
    }
    
    // Active state, and it's :hover to override normal :hover
    .tabs > .selected > a,
    .tabs > .selected > a:hover {
      color: @gray;
      background-color: @white;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
      cursor: default;
    }

Is there any better way to achieve this, without much copy and paste? Note: I
can not change the HTML file.

