小程序是一種基于微信平臺的輕量級應用程序,具有輕便、快速、易傳播等優勢。而在開發小程序的過程中,樣式的重復使用是經常遇到的問題,為了更高效地管理樣式,小程序提供了公共CSS的解決方案。
公共CSS是指在小程序中使用的所有CSS樣式所共享的集合。通過在app.wxss文件中編寫CSS樣式,然后在其他頁面的wxss文件中引用這個樣式集合,就可以實現樣式的重復使用。
//app.wxss 中定義公共CSS .common-text { font-size: 16px; color: #333333; } .common-title { font-size: 20px; color: #000000; } .common-btn { background-color: #FF0000; color: #FFFFFF; } //page1.wxss 使用公共CSS @import "/app.wxss"; .page1-text { @extend .common-text; font-weight: bold; } .page1-title { @extend .common-title; text-align: center; } .page1-btn { @extend .common-btn; border-radius: 5px; } //page2.wxss 使用公共CSS @import "/app.wxss"; .page2-text { @extend .common-text; font-style: italic; } .page2-title { @extend .common-title; text-align: left; margin-top: 20rpx; } .page2-btn { @extend .common-btn; border: 1rpx solid #CCCCCC; }
如上所示,通過在每個頁面的wxss文件中引用app.wxss中定義的公共CSS,我們可以避免每個頁面都重復編寫相同的樣式,從而提高了代碼的可維護性和復用性。
需要注意的是,公共CSS只能包含樣式規則,不能包含頁面樣式,例如頁面的布局等。因為公共CSS和頁面樣式無法共存,會產生沖突。另外,公共CSS的修改會影響到所有引用了它的頁面,需要謹慎操作,建議在修改公共CSS前進行全面的測試。
上一篇jquery 數組倒敘
下一篇jquery 數組 輸出