4.css預處理是一種常見的CSS樣式表擴展語言，也是前端開發必備技能之一。它可以在CSS基礎上增加一些新的特性，讓我們的樣式表更加易于維護和擴展。

// 假設這是CSS代碼
body {
font-size: 14px;
color: #333;
background-color: #f9f9f9;
}
// 使用4.css的變量
@color: #333;
@bg-color: #f9f9f9;
body {
font-size: 14px;
color: @color;
background-color: @bg-color;
}
// 使用4.css的嵌套
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
margin-right: 10px;
a {
text-decoration: none;
color: @color;
&:hover {
text-decoration: underline;
}
}
}
}
}

在上面的代碼中，我們可以看到兩個4.css的特性：變量和嵌套。

變量可以幫助我們更方便地管理常用的顏色、字體大小等屬性。在文中的例子中，我們定義了兩個變量@color和@bg-color來管理字體顏色和背景顏色。

嵌套可以使我們避免寫冗長的選擇器層級。在文中的例子中，我們使用嵌套將nav、ul、li、a這幾個選擇器組合在一起，大大減少了代碼的長度和可讀性的提高