像素 / rem 轉換

大部分的設計師習慣使用像素（pixel）來做為設計單位，而開發者則是習慣使用 rem 來設置網頁的文字大小、間距等等。

因此開發者就需要不斷地反覆計算、查表，這個時間累積下來是很可觀的。

以文字大小 24px 為例，轉換成 rem 的話就是 24 / 16 = 1.5rem。

<h1 class="font:1.5rem">...</h1>

.font\:1\.5rem {
  font-size: 1.5rem;
}

轉換行為

Master CSS 內建的轉換行為，讓我們可以直接寫上預期的 24（px），不用再去計算。

<h1 class="font:24">...</h1>

並且生成的 CSS 會自動幫我們轉換成 rem。

.font\:24 {
  font-size: 1.5rem;
}

保留單位

可能有些人會有這樣的需求，希望生成的 CSS 規則能夠保留單位（例如 em、px）。

<h1 class="font:24px">...</h1>
<h1 class="font:1.5em">...</h1>

.font\:24px {
  font-size: 24px;
}

.font\:1\.5em {
  font-size: 1.5em;
}

總結

本日 codepen 連結

Master CSS 內建的轉換行為，不僅提升了生產力還消彌了單位在 class 中出現的頻率及觀感。

參考

• Master CSS 官網 - 常用單位轉換