在開發網頁時，我們通常會使用CSS來控制網頁的樣式。但是，有時我們需要多次使用相同的CSS代碼，這時候如何避免重復勞動呢？下面就來介紹一些反復使用CSS代碼的方法。

1.使用class選擇器

.text-red {
color: red;
}
.text-yellow {
color: yellow;
}
.text-green {
color: green;
}

通過給不同的元素添加不同的class名，可以復用相同的CSS樣式。

2.使用變量

:root {
--text-color-red: red;
--text-color-yellow: yellow;
--text-color-green: green;
}
.text-red {
color: var(--text-color-red);
}
.text-yellow {
color: var(--text-color-yellow);
}
.text-green {
color: var(--text-color-green);
}

使用變量可以實現對一組樣式進行集中管理，方便修改和復用。

3.使用@extend

.text {
color: red;
}
.text-red {
@extend .text;
}
.text-yellow {
@extend .text;
color: yellow;
}
.text-green {
@extend .text;
color: green;
}

@extend 可以讓多個選擇器擁有相同的屬性，從而減少代碼重復。

總之，為了避免重復勞動，反復使用CSS樣式，我們可以使用class選擇器、變量和@extend等方法。選擇適合自己的方法，提高開發效率，讓代碼更加優雅！