CSS是前端開發中重要的一部分，它可以控制一個網站的樣式和布局，讓它更美觀、易于使用。在開發網站時，代碼的復用性是非常重要的，這樣可以減少開發者的重復勞動，節約時間和成本。下面我來談談CSS的復用性。

/* 定義一個按鈕樣式 */
.btn {
border: none;
border-radius: 4px;
padding: 10px 20px;
background-color: #4285f4;
color: white;
cursor: pointer;
}
/* 使用按鈕樣式來定義特定樣式的按鈕 */
#login-btn {
/* 繼承.btn的樣式 */
@extend .btn;
font-size: 16px;
}
/* 使用按鈕樣式來定義不同顏色的按鈕 */
.success-btn {
/* 繼承.btn的樣式 */
@extend .btn;
background-color: #34a853;
}
.warning-btn {
/* 繼承.btn的樣式 */
@extend .btn;
background-color: #fbbc05;
}
.error-btn {
/* 繼承.btn的樣式 */
@extend .btn;
background-color: #ea4335;
}

如上所示，我們定義了一個按鈕樣式，然后使用@extend指令來定義不同特定和顏色的按鈕。這樣可以減少樣式的重復定義，提高代碼的復用性。

此外，還可以使用變量來定義顏色、字體和布局等方面的值。如下所示：

/* 定義變量 */
$font-size: 16px;
$primary-color: #4285f4;
$secondary-color: #34a853;
/* 使用變量 */
body {
font-size: $font-size;
}
.btn {
border: none;
border-radius: 4px;
padding: 10px 20px;
background-color: $primary-color;
color: white;
cursor: pointer;
}
.success-btn {
@extend .btn;
background-color: $secondary-color;
}

如上所示，我們在開頭定義了變量，然后在后面的樣式定義中使用這些變量。這樣做的好處是，如果以后需要修改顏色或字體大小，只需要修改變量的值即可，不需要修改每個樣式中的具體數值，這樣可以提高代碼的維護性和復用性。

CSS的復用性不僅可以通過繼承和變量來實現，還可以使用一些框架和庫。比如Bootstrap、Foundation等。這些框架提供了大量的CSS類來定義常見的樣式和布局，可以大大提高代碼的復用性和開發效率。