iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
自我挑戰組

蚵蚵攻城記系列 第 12

[Day12] Less mixin

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;
}

mix
但是重複的內容寫得太多了...
所以可以把它提出來當作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;
}

這樣省時間多了呢!


上一篇
[Day11] Less variables
下一篇
[Day13] Less nested
系列文
蚵蚵攻城記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言