赫謙小便籤

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

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

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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

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

notes, scss, tricks

Comments