Less mixin感覺有點像數學的乘法分配律
a * ( b + c ) = ( a * b ) + ( a * c )
這樣的感覺。

<div class='container'>
  <div  class='stem-cell'>
    <h2>X細胞</h2>
    <ul>
      <li>方案一</li>
      <li>方案二</li>
      <li>方案三</li>
    </ul>
  </div>
  <div class='gene-typing'>
    <h2>OO定序</h2>
    <ul>
      <li>方案一</li>
      <li>方案二</li>
      <li>方案三</li>
    </ul>
  </div>
  <div class='med-beauty'>
    <h2>生O美容</h2>
    <ul>
      <li>方案一</li>
      <li>方案二</li>
      <li>方案三</li>
    </ul>
  </div>
</div>

.container{
  display: flex;
  justify-content: space-around;
  width: 500px;
}

.stem-cell{
  width: 150px;
  height: 200px;
  border: 2px solid ;
  text-align: center;
  color: #ff0000;
}

.gene-typing{
  width: 150px;
  height: 200px;
  border: 2px solid ;
  text-align: center;
  color: #009900;
}

.med-beauty{
  width: 150px;
  height: 200px;
  border: 2px solid ;
  text-align: center;
  color: #0000ff;
}

但是重複的內容寫得太多了...
所以可以把它提出來當作default，

.container{
  display: flex;
  justify-content: space-around;
  width: 500px;
}

.box-default{
  width: 150px;
  height: 200px;
  border: 2px solid ;
  text-align: center;
}

.stem-cell{
  .box-default;
  color: #ff0000;
}

.gene-typing{
  .box-default;
  color: #009900;
}

.med-beauty{
  .box-default;
  color: #0000ff;
}

這樣省時間多了呢！