scss中迴圈之@for迴圈佈局畫圓

前端晉級攻城獅發表於2019-04-12
最近在寫圓周上畫圓問題,圓周上12個圓均勻分佈,佈局以後,小圓佈局如果一個一個去通過nth-child去選擇就比較麻煩了,程式碼量很大,因為用框架開發,css預處理選擇的scss,scss是可以寫方法和巢狀語句的,類似js一樣,噹噹噹,劃重點。於是乎寫了這樣的例子參考下,最基礎的。
複製程式碼
  @for $i from 1 through 12 {
    li:nth-of-type(#{$i}) {
      transform: rotate(($i - 1) * 30  + deg);
    }
  }
複製程式碼

相關文章