在網頁開發中，rem（root em）被廣泛應用于css樣式中，并且它通常被用來代替像素值，因為像素值不能根據設備屏幕的大小而調整。而對于對于調整設備大小很敏感的網站，應該嘗試使用rem measurements。在CSS中使用rem有兩個步驟：首先要設置html font-size， 然后定義所有font-size，margin，padding等長度的值。我們可以利用CSS預處理語言來簡化這個過程。

在這里，我們使用Sass（Syntactically Awesome StyleSheets）來演示如何使用CSS預處理器實現rem的應用。我們首先在一個單獨的_scaffolding.scss文件中定義了一個mixin來設置html和body的font-size:

//定義 Scaffolding 文件夾： (_scaffolding.scss)
$base-font-size: 16px !default;
@mixin font-size {
font-size: $base-font-size;
}
html{
font-size: $base-font-size;
}
body{
@include font-size;
}

這個代碼塊便是一個mixin，可以幫助我們在定義其他元素時不需要重復定義html和body的font-size。我們需要注意的是 $base-font-size 是我們與像素基礎值一樣的根值，因此，若您的設計師在設計時使用12px為基礎的話，那么 $base-font-size 就是12px。

然后我們就可以在其他樣式定義中使用此mixin.在接下來的示例中，我們可以這樣來定義一個邊框(padding和margin)的樣式文件:

//定義 Borders 文件夾: (_borders.scss)
@import "scaffolding";
$border-width: 1px;
@mixin spacing($property, $values: 0) {
@each $direction in top, right, bottom, left {
#{$property}-#{$direction}: ($values / $base-font-size + $border-width)rem;
}
}
.btn {
@include spacing(padding, 10);
@include spacing(margin, 6);
}

這里我們用到了其他常用的mixin，如 @import 用于引入_scaffolding.scss文件、$border-width定義為1px用于生成padding、margin、border時的邊界寬度。事實上，這個.scss文件通過變量的定義和mixin的使用來優化我們的代碼，使我們定義類甚至樣式的代碼更簡潔。

通過使用Sass等預處理器，我們可以方便地定義樣式并使用rem作為指標，而像素則可以靈活應用在開發中。此外，如果你是JavaScript開發者,你也可以使用JS的類庫引入自定義的mixin。JS類庫引入自定義的mixin是一個非常好的做法，能夠幫我們快速實現一個高級的定制樣式系統為后續項目提供極大的優化與可重用性。