在使用CSS時，我們經常面臨一個問題：如何提高代碼的復用性？下面我們將介紹一些方法來提高CSS的復用性。

1. 減少重復性代碼

.btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
background-color: #fff;
}
.btn-primary {
color: #fff;
background-color: #007bff;
}
.btn-danger {
color: #fff;
background-color: #dc3545;
}

在上面的代碼中，我們可以看到.btn-primary和.btn-danger都有color和background-color屬性，這樣的代碼是冗余的，可以減少重復代碼：

.btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
background-color: #fff;
}
.btn-primary {
@extend .btn;
color: #fff;
background-color: #007bff;
}
.btn-danger {
@extend .btn;
color: #fff;
background-color: #dc3545;
}

2. 使用變量

$primary-color: #007bff;
$danger-color: #dc3545;
.btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
background-color: #fff;
}
.btn-primary {
@extend .btn;
color: #fff;
background-color: $primary-color;
}
.btn-danger {
@extend .btn;
color: #fff;
background-color: $danger-color;
}

我們可以使用變量來存儲顏色值，這樣我們可以在其他樣式中使用這些變量，提高代碼的復用性。

3. 使用mixin

@mixin btn($color) {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
background-color: #fff;
color: #fff;
background-color: $color;
}
.btn-primary {
@include btn(#007bff);
}
.btn-danger {
@include btn(#dc3545);
}

使用mixin可以將相同的代碼塊重復使用。

4. 使用全局樣式

:root {
--primary-color: #007bff;
--danger-color: #dc3545;
}
.btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000;
background-color: #fff;
}
.btn-primary {
color: #fff;
background-color: var(--primary-color);
}
.btn-danger {
color: #fff;
background-color: var(--danger-color);
}

使用全局樣式可以將變量定義在一個地方，方便在其他樣式中使用。

以上就是一些提高CSS復用性的方法，希望能對大家有所幫助。