用SCSS定义class前缀

假设html片段如下

<div id="tab-demo">
 <div class="tabs-bar" role="tablist">
   <ul class="tabs-nav">
     <li role="tab" class="tabs-tab">Tab 1</li>
     <li role="tab" class="tabs-tab">Tab 2</li>
     <li role="tab" class="tabs-tab">Tab 3</li>
   </ul>
 </div>
 <div class="tabs-content">
   <div role="tabpanel" class="tabs-panel">
     第一个 Tab 里的内容
   </div>
   <div role="tabpanel" class="tabs-panel">
     第二个 Tab 里的内容
   </div>
   <div role="tabpanel" class="tabs-panel">
     第三个 Tab 里的内容
   </div>
 </div>
</div> 

那么用SCSS可以如下定义一个前缀

$class-prefix: "tabs"; 
.#{$class-prefix} { 
  &-bar {
    margin-bottom: 16px;
  } 
  &-nav {
    font-size: 14px;
  }
}

编译后

.tabs-bar {
  margin-bottom: 16px;
}
.tabs-nav {
  font-size: 14px;
}