stylus一键换肤

[lovelmh13]

关键就是给 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/[email protected]') 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/[email protected]') 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;
}