在CSS中，擴展是一個非常有用的特性，它允許我們通過繼承樣式規則來避免重復的代碼，從而讓我們的CSS更加靈活和易于維護。 使用一個簡單的例子來說明擴展的作用： 我們有兩個類名為.btn和.btn-primary的按鈕，它們的樣式非常相似，但.btn-primary按鈕可能需要額外的樣式。如果我們想要實現這樣的效果，我們可以這樣寫CSS代碼：

.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
}
.btn-primary {
background-color: #007bff;
color: #fff;
}

但是，這種方式存在著很多的重復代碼，每個按鈕的共同樣式都需要重復定義。如果我們有很多不同顏色和樣式的按鈕，這將會是一個很麻煩的問題。 這時，我們可以使用擴展來解決這個問題。通過擴展，我們可以將.btn-primary的樣式繼承.btn的樣式并添加新的樣式。 這是一個使用擴展的改進版代碼：

.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
}
.btn-primary {
@extend .btn;
background-color: #007bff;
color: #fff;
}

通過使用@extend命令，我們可以繼承.btn的樣式，這就避免了重復的代碼，并且可以很容易地添加新的樣式，實現了CSS的重用。 總結：使用CSS的擴展機制可以減少代碼的重復性，提高代碼的維護性，讓我們的CSS代碼更加靈活、簡潔，同時也更加易于擴展。