Sassの@eachを使ってタブ実装をするCSS思いついた ref: http://qiita.com/inuscript/items/295616708cc18c255995

file0.html

<ul id="list1">
    <li>AAAA</li>
    <li class="active">BBBB</li>
    <li>CCCC</li>
</ul>

file1.txt

#list1{
  li{
    cursor: pointer;
    display: inline-block;
    border: 1px gray solid;
    border-bottom: 0px;
    padding: 10px;
  }
  .active{
    background: #ccb;
  }
}

file2.txt

- var activeTab = "bbbb"
- var tabs = ["aaaa", "bbbb", "cccc"]
ul#list1
  each tab,i in tabs
    li(class=(tab == activeTab ? "active" : "" ))= tab        

file3.html

<ul id="list2" class="active-bbbb"> <!-- 親で指定する -->
    <li class="tab-aaaa">AAAA</li>
    <li class="tab-bbbb">BBBB</li>
    <li class="tab-cccc">CCCC</li>
</ul>

file4.txt

#list1{
  li{
    cursor: pointer;
    display: inline-block;
    border: 1px gray solid;
    border-bottom: 0px;
    padding: 10px;
  }
  $tabs: aaaa, bbbb, cccc; // 利用するタブを並べる
  @each $tab in $tabs{
    &.active-#{$tab}{
      .tab-#{$tab}{ // 親と一致したらactive化する
        background: #ccb; 
      }
    }
  }
}

file5.css

#list1 li {
  cursor: pointer;
  display: inline-block;
  border: 1px gray solid;
  border-bottom: 0px;
  padding: 10px;
}

#list1.active-aaaa .tab-aaaa {
  background: #ccb;
}

#list1.active-bbbb .tab-bbbb {
  background: #ccb;
}

#list1.active-cccc .tab-cccc {
  background: #ccb;
}

file6.txt

- var activeTab = "bbbb"
- var tabs = ["aaaa", "bbbb", "cccc"]
ul#list2(class="active-" + activeTab)    
  each tab,i in tabs
    li(class="tab-" + tab)= tab