stylus一键换肤
Opened this issue · 0 comments
lovelmh13 commented
关键就是给 html 根元素上,弄一个属性选择器
1. 先写一个js,在开始的时候就执行
mounted() {
this.changeTheme('LUXURY')
}
// 换肤
changeTheme(theme) { // theme是需要传递的皮肤名字,比如下面的COMMON 、LUXURY
window.document.documentElement.setAttribute('data-theme', theme)
},
// variable.styl
lucky = {
name: 'COMMON',
text_color: #7AB3FF,
tab_bg_color: linear-gradient(135deg, #85F7FF 0%, #7AB3FF 100%),
card_bg_url: url('~img/app/cardGame/luckyBgCard@3x.png') no-repeat,
card_border_color: #BCD9FF,
card_shadow0_color: rgba(133, 247, 255, 1),
card_shadow50_color: rgba(122, 179, 255, 1)
}
luxury = {
name: 'LUXURY',
text_color: #A691FF,
tab_bg_color: linear-gradient(135deg, #F4B5FF 0%, #A390FF 100%),
card_bg_url: url('~img/app/cardGame/luxuryBgCard@3x.png') no-repeat,
card_border_color: #D3C8FF,
card_shadow0_color: rgba(244, 181, 255, 1),
card_shadow50_color: rgba(163, 144, 255, 1)
}
themeList = (lucky luxury)
// minix.styl
@import './variable.styl'
// 边框
border_color($color) {
// 默认样式(任意选择一个主题即可注意要和下面的默认主题一致) 注意:这里的background-color: lucky[$color]; 一定要有:和; 否则eslint会报错!
border: 1px solid lucky[$color];
for item in themeList {
// 判断html的data-theme的属性值,{item.name}是Stylus插值; &是父级选择器
[data-theme = {item.name}] & {
// 这里的item可以当作一个对象,item[$color]可表示为:对象名.属性
border: 1px solid item[$color]
}
}
}
使用:
// 换肤
@import './style/mixin.styl'
.box {
.btn {
border_color(text_color)
}
}
等价于css:
[data-theme = LUXURY] .box .btn {
border: 1px solid #a691ff;
}