在開發(fā)網(wǎng)頁的過程中，經(jīng)常會遇到相似的粘性CSS的問題。比如，要實現(xiàn)多個不同組件的吸頂效果，他們的CSS代碼都有很多相同的部分。這時候，我們需要想辦法解決這個問題，避免代碼冗余和維護困難。

.sticky-header {
position: fixed;
top: 0;
z-index: 999;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sticky-footer {
position: fixed;
bottom: 0;
z-index: 999;
background: #fff;
box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}
.sticky-sidebar {
position: sticky;
top: 0;
z-index: 999;
background: #fff;
box-shadow: 1px 0 3px rgba(0,0,0,0.1);
}

上面的代碼展示了三個不同組件的粘性CSS代碼，它們之間有很多重復(fù)的部分，比如z-index和box-shadow等屬性。我們可以使用CSS變量來解決這個問題。

:root {
--stickySidebar: {
position: sticky;
top: 0;
z-index: 999;
background: #fff;
box-shadow: 1px 0 3px rgba(0,0,0,0.1);
};
--stickyHeader: {
position: fixed;
top: 0;
z-index: 999;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
};
--stickyFooter: {
position: fixed;
bottom: 0;
z-index: 999;
background: #fff;
box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
};
}
.sticky-sidebar {
@apply --stickySidebar;
}
.sticky-header {
@apply --stickyHeader;
}
.sticky-footer {
@apply --stickyFooter;
}

我們在:root偽類下定義了三個變量，分別對應(yīng)三種不同的粘性效果。然后在各自的類名下，使用@apply指令引用這些變量即可。這樣，我們就實現(xiàn)了代碼的重用和優(yōu)化。