CSS中的自定義長度單位是一種非常有用的工具，它能夠提高我們對布局的控制力和精度。在默認情況下，CSS中的長度單位只有像素、百分比和em等幾種基本單位。但是這些基本單位在不同的屏幕尺寸和設備上顯示的效果差別較大，使用自定義長度單位可以彌補這些差別。

/* 自定義長度單位 */
/* 引入SCSS變量 */
$unit-1x: 16px; /* 設計稿中1x的像素值 */
$unit-2x: 32px; /* 設計稿中2x的像素值 */
$unit-3x: 48px; /* 設計稿中3x的像素值 */
/* 定義自定義長度單位 */
$m-unit-1x: ($unit-1x / 16) + rem;
$m-unit-2x: ($unit-2x / 16) + rem;
$m-unit-3x: ($unit-3x / 16) + rem;
/* 使用自定義長度單位 */
.foo {
font-size: $m-unit-2x; /* 2x字號 */
padding: $m-unit-1x; /* 1x邊距 */
border-radius: $m-unit-3x; /* 3x圓角 */
}

在這段代碼中，我們使用了SCSS預處理器來定義自己的長度單位。首先定義了設計稿中1x、2x和3x分別對應的像素值，然后通過除以16來轉換成rem單位，并加上rem后綴，定義為自定義長度單位。在樣式中，我們可以直接使用$m-unit-1x、$m-unit-2x、$m-unit-3x來表示1x、2x、3x對應的長度值。這樣，在不同屏幕尺寸和設備上，我們都可以保持一致的布局效果。