SCSS小技巧:更結構化的寫margin、padding、font..etc

之前忘記在哪邊看到一篇文章,裡面寫了一個SCSS(SASS)的小技巧,可是我當時沒有辦法把文章给加到閱讀列表中,只好憑印象來測,最後終於測出來了。

我們常常可能寫以下的CSS code

margin-top: 30px;
margin-right: 10px;
font-size: 24pt;
font-family: Arial;
padding-top: 20px;
padding-right: 15px;

但其實這樣寫挺雜亂的,有了SCSS我們就應該要放下屠刀立地成佛啊!(誤

請改成以下寫法(與上面做比對):

margin:{
  top: 30px;
  right: 10px;
}

font:{
  size: 24pt;
  family: Arial;
}

padding:{
  top: 20px;
  right: 15px;
}

怎麼樣?是不是很簡潔整齊呢?

Comments

comments powered by Disqus