//颜色定义规范 $background-color-theme: #3f8e4d;//背景主题颜色默认 $background-color-theme1: red;//背景主题颜色1 $background-color-theme2: #652BF5;//背景主题颜色2 $background-color-theme3: deepskyblue;//背景主题颜色3 $background-color-themesec: #edc148;//背景次要主题颜色 $font-color-theme : #3f8e4d;//字体主题颜色默认 $font-color-theme1 : red;//字体主题颜色1 $font-color-theme2 : #652BF5;//字体主题颜色2 $font-color-theme3 : deepskyblue;//字体主题颜色3 $font-color-themesec : #edc148;//字体次要主题颜色 $font-color-shallow0 : #000; $font-color-shallow1 : #111; $font-color-shallow2 : #222; $font-color-shallow3 : #333; $font-color-shallow4 : #444; $font-color-shallow5 : #555; $font-color-shallow6 : #666; $font-color-shallow7 : #777; $font-color-shallow8 : #888; $font-color-shallow9 : #999; $font-color-shallowdb : #dbdbdb; //字体定义规范 $font_little_s:10px; $font_little:12px; $font_medium_s:14px; $font_medium:16px; $font_large_s:18px; $font_large:20px;
mine.vue中更换主题时的操作代码
<template> <div> <v-head :title="title" :showBack="showBack"></v-head> <div> <p @click="changeTheme('theme1')"></p> <p @click="changeTheme('theme2')"></p> <p @click="changeTheme('theme3')"></p> </div> <v-foot :activeIndex="3"></v-foot> </div> </template> <script> export default { name: 'mine', data () { return { title: '我的', showBack: false } }, methods: { changeTheme (theme) { window.document.documentElement.setAttribute('data-theme', theme) } }, components: { } } </script> <style scoped="" lang="scss"> p{ @include px2rem(width,100px); @include px2rem(height,100px); @include px2rem(margin,20px); float:left; } p:first-child{ background-color:red; } p:nth-child(2){ background-color:#652BF5; } p:last-child{ background-color:deepskyblue; } </style>
其实过程和逻辑都比较简单，大家理解一下，有不明白的地方在下方评论区评论，有错误的地方也欢迎大家指出，看到后我会回复
总结
以上所述是小编给大家介绍的Vue中使用sass实现换肤功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: