title: How to reuse styles?
body: <p>Back in the past I learned a lot about CSS but now I can't remember how to reuse styles.</p>
  
  <p>Example:</p>
  
  <p>I have some tabs with class <code>tab</code> and I can switch them with javascript. The current selected tab has another class, <code>active</code>.</p>
  
  <p>Their CSS style:</p>
  
  <pre><code>.tab {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      padding: 15px 0 15px 0;
      border: solid thin #CCC;
      text-align: center;
      font-weight: bold;
      margin-bottom: 10px;
      color: #272F42;
      cursor: pointer;
      background-color: white;
  }
  
  .active {
      position: relative;
      top: 0;
      left: 0;
      padding: 15px 0 15px 0;
      border: solid thin #CCC;
      text-align: center;
      font-weight: bold;
      margin-bottom: 10px;
      color: #272F42;
      cursor: default;
      background-color: #FFCF75;
  }
  </code></pre>
  
  <p>Both styles has a lot of identic styles except 2, <code>cursor</code> and <code>background-color</code>.</p>
  
  <p>So my question is, how can I resuse the .tab style and use it in .active?</p>
  
  <p>I want achieve something like this:</p>
  
  <pre><code>.active { //extends .tab
      cursor: default;
      background-color: #FFCF75;
  }
  </code></pre>
  
  <p>Thanks.</p>