基于scss的主题变换

最近老大让我调整xframe中图标，因为要换肤，所以我刚好学习一下换肤的原理，

主要是参考这两篇文章

项目主要的目录如下图，只能放到这里再多就泄露代码了

主要的文件有

themeVariable.scss 主题变量

variable.scss 主要是定义一些变量

themeMixin.scss 主要实现

@mixin

接下来我们就来实现以下主题切换的方式

首先 是 themeVariable.scss

// 五种主题切换

$themes: (

red: (

font-color: red,

),

green: (

font-color: green

),

blue: (

font-color: blue

),

orange: (font-color: orange),

yellow: (font-color: yellow),

);

这里red,green,blue等，可以用变量代替，因此就出现了variable.scss

$color-red: red;

$color-green: green;

$color-blue: blue;

$color-orange: orange;

$color-yellow: yellow;

最后就是 themeMixin.scss 使用

@Mixin

@import "./themeVariable.scss";

@mixin themify($themes: $themes) {

@each $theme-name, $map in $themes {

// & 表示父级元素

// !global 表示覆盖原来的

.theme-#{$theme-name} & {

$theme-map: () !global;

// 循环合并键值对

@each $key, $value in $map {

$theme-map: map-merge($theme-map, ($key: $value)) !global;

}

// 表示包含 下面函数 themed()

@content;

$theme-map: null !global;

}

}

}

@function themed($key) {

@return map-get($theme-map, $key);

}

最后就是使用了

{{ msg }}

Red

Green

Blue

export default {

name: 'app',

data() {

return {

msg: 'Dynamic Themes',

theme: 'red'

}

},

computed: {

themeClass() {

return `theme-${this.theme}`;

}

}

}

@import "../assets/css/themfy.scss";

.app-container {

@include themify($themes) {

color: themed('font-color');

}

}

最后效果如下

注意下面的class会变化