CSS（層疊樣式表）是用來定義網頁外觀的語言。它決定了我們看到的文字、顏色、大小和位置等等。但是，使用原生CSS編寫復雜的樣式可能會非常繁瑣。這時候，CSS預處理器就可以派上用場了。

CSS預處理器是一種將類CSS的語言編譯成合法CSS的工具。它為CSS語言提供了許多額外的功能和語法規則，使得CSS更加易于維護和重用。其中最流行的預處理器包括Sass、Less和Stylus。

下面我們通過一個簡單的例子來展示CSS預處理器的用法。

// Sass代碼
$primary-color: #007bff;
.header {
background-color: $primary-color;
color: white;
padding: 20px;
}

上述代碼是用Sass編寫的，通過定義變量“$primary-color”，我們可以重復使用該變量，避免在多個地方寫相同的顏色值。此外，我們也可以定義“mixin”，即為元素設置一組樣式，并在需要的地方調用。這使CSS更加DRY（不重復的）。

// 含有mixin的Sass代碼
$primary-color: #007bff;
@mixin rectangle {
width: 100px;
height: 50px;
border: 1px solid black;
}
.header {
background-color: $primary-color;
color: white;
padding: 20px;
}
.button {
@include rectangle;
background-color: $primary-color;
}

上述代碼中，我們定義了一個名為“rectangle”的mixin，并將元素的樣式寫在代碼塊中。在.button類中，我們調用rectangle mixin，并為該元素添加了背景色。

總之，CSS預處理器為我們提供了許多優勢，如變量、嵌套規則、mixin等，使得CSS語言更加易于維護、重用和擴展。當然，我們也需要學習特定的預處理器語言（如Sass、Less和Stylus），同時需要注意一些語法規則和編譯過程。