在Vue中使用sass实现换肤功能

让我先给你看效果图：

我先给你看一下内容和主要文件：

解释主要文件：

Base.scss:一些常见的样式文件。

Mixin.scss:定义Mixin方法的文件。

Varibale.scss:颜色、字体和背景的配置文件

这里，我们将使用封装的head组件代码展示以下实现逻辑。现在我们主要了解到大家不要急着复制代码，三个主文件的代码会贴在文末。

为什么是在背景：美元背景色主题；错误的位置标记？

以前用过sass的同学可能都知道，虽然css样式是可变的，但是以后没有办法进行灵活的修改。

因此，需要将设置背景色打包成mixin方法(包括字号和字体颜色，都需要打包)

看看mixin.scss中的代码：

主要原则：

通过设置html的属性属性来判断封装函数，并相应地设置不同的颜色

[]在css中可以识别html标签上设置的属性，所以当html中对应的属性发生变化时，就会执行对应的样式。

此步骤类似于添加。活动属性设置为div，css自动执行相应的样式。

更改主题时要做什么：

下面是主文件的完整代码

base.scss的示例代码：

@ charset“utf-8”；$ font _ default _ color : $ font-color-浅水3；$ font _ default _ size : $ font _ medium _ s；* { margin:0划水：0；盒子大小：边框盒子；color: $ font _ default _ color/* @ include font-DPR($ font _ default _ size)；*/} a { text-decoration : none；color: $ font _ default _ color}.子页{ //routerView位置：固定；top : 0；bottom : 0；宽度： 100%；背景# fffright : 0；left : 0；z-index : 5；} #内容{ width :100%；位置：绝对；@ include px rem(top，88px)；底部：0；overflow-x : auto；}.宽度{ width :100%；}/*垂直居中*/。表格单元格{display :表格单元格；垂直对齐：毫米；文本对齐：居中；}.中间{垂直对齐： middle；}/*弹性盒*/。flex { display : inline-flex；display :-web kit-flex；display: flex}/*弹性框-子元素可以垂直居中*/。flex-middle { display : flex；display :-web kit-flex；align-items : center；-web kit-align-items : center；justice-content : center；}.TL { text-align : left；}.TC { text-align : center；}.tr { text-align : right；}.fl { float:left}.fr { float:right}.clear:after{ /*原理：溢出！=可见；展示！=block漂浮！=无；位置！=静态| |相对可以创建BFC；对于元素；消除重叠或浮动边距*/content:“”的影响；飞越：隐藏；clear:both}mixin.scss示例代码：

@ charset“utf-8”；@import ./variable '；/*引入配置*/@mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/@ include font-DPR($ size)；}@mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/color : $ color；[数据-主题='主题1 ']{ color : $ font-color-主题1；}[数据-主题='主题2 ']{ color : $ font-color-主题2;}[数据-主题='主题3 ']{ color : $ font-color-主题3;}}@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/底色-:美元颜色；[数据-主题='主题1 ']{背景色：美元背景色-主题1；}[数据-主题='主题2'] {背景-颜色：美元背景-颜色-主题2;}[数据-主题='主题3 ']{背景色：美元背景色-主题3；}}/*px转rem */@ mixin px rem($ property，$px，$px2:false，$px3:false，$ px 4: false){ $ rem :75 px；/* 设计稿尺寸/10 */@if $px和$px2和$px3和$ px4 { # { $ property } :($ px/$ rem)rem($ px2/$ rem)rem($ px3/$ rem)rem($ px4/$ rem)rem；} @else if $px和$ px2 { # { $ property } :($ px/$ rem)rem($ px2/$ rem)rem；//[data-model=' pad ']{ # { $ property } :($ px * 1.4/$ rem)rem($ px2 * 1.4/$ rem)rem；} } @ else { # { $ property } :($ px/$ rem)rem！重要；//[数据-模型=' pad ']{ # { $ property } :美元(px * 1.4/$ rem)rem；} }}/*根据项目文件计算font-size */@ mixin font-DPR($ font-size){ font-size : $ font-size；//[data-model=' pad ']{ font-size : $ font-size * 1.4；}[数据-DPR=' 2 ']{ font-size : $ font-size * 2；}[数据-DPR=' 3 ']{ font-size : $ font-size * 3；}}/*弹性盒属性*/% flexbox { display : inline-flex；display :-web套件-flex；display: flex}/*弹性盒比例*/@ mixin flex($ num :1){-web kit-box-flex : $ num；-moz-box-flex : $ num；-web套件-flex : $ num；-ms-flex : $ num；flex: $ num}/*超行溢出显示省略号*/@mixin溢出($num:1，$fontSize:0，$行高：1.5){ display :-web kit-box；-网套件-线夹：美元。飞越：隐藏；/*!autoprefixer:关闭*/-网络套件-面向盒子的：垂直；/* autoprefixer : on */@ if $ font size！=0和$lineHeight{/*高度需要撑开*/行高-:美元行高；@ if $行高1.2 {行高：1.2；/*最小需要1.2,否则在部分安卓机下第$num 1行会顶部漏出*/} height : $ num * $ font size * $ line height；[数据-DPR=' 2 ']{高度： $ num * $字号* $行高* 2！重要；}[数据-DPR=' 3 ']{高度： $ num * $字号* $行高* 3！重要；} } }//过渡兼容写法@ mixin过渡($ content : all)。2s){-moz-transition : $ content；-网络套件-transit :美元内容；-o-transit :美元内容；过境费：美元内容；}//transfrom兼容@ mixin translateX($ num :-50%){-ms-transform : translateX($ num)；-moz-transform : translateX($ num)；-web套件-transform : translateX($ num)；-o-transform : Translatex($ num)；transform : translateX($ num)；} @ mixin translateY($ num :-50%){-ms-transform : translateY($ num)；-moz-transform : translateY($ num)；-web套件-transform : translateY($ num)；-o-transform : translateY($ num)；transform : translateY($ num)；} @ mixin rotate($ deg :90 deg){-ms-transform : rotate($ deg)；-moz-transformer : rotate($ deg)；-web套件-transform : rotate($ deg)；-o型变压器：转($ deg)；变压器：旋转($ deg)；}变量。半导体色敏传感器示例代码：

//颜色定义规范$底色-主题： # 3f8e 4d//背景主题颜色默认$底色-主题1:红色；//背景主题颜色一美元背景色-主题主题2: # 652BF5//背景主题颜色2美元底色-主题3:深蓝；//背景主题颜色3美元背景色-主题# edc148//背景次要主题颜色$ font-color-theme : # 3f8e 4d；//字体主题颜色默认$font-color-theme1 :红色；//字体主题颜色一美元字体-颜色-主题： # 652BF5//字体主题颜色2美元字体-颜色-主题3 :深蓝；//字体主题颜色3美元字体-颜色-主题： # edc148//字体次要主题颜色$字体-颜色-浅水0 : # 000;$字体-颜色-浅水1 : # 111;$字体-颜色-浅滩2 : # 222;$字体-颜色-浅滩3 : # 333;$字体-颜色-浅滩4 : # 444;$字体-颜色-浅水5 : # 555;$字体-颜色-浅滩6 : # 666;$字体-颜色-浅滩7 : # 777;$字体-颜色-浅滩8 : # 888;$字体-颜色-浅水9 : # 999;$字体-颜色-浅水： # dbdbdbdb//字体定义规范$ font _ little _ s 336010 px $ font _ little :12 px $ font _ medium _ s 336014 px $ font _ medium :16 px $ font _ large _ s 336018 px $ font _ large :20 pxmine . vue中更换主题时的操作代码

模板div id=' bookcaselist ' v-head : title=' title ' : show back=' show back '/v-head div id=' content ' p @ click='更改主题('主题1 ')'/p p @ click='更改主题('主题2 ')'/p @ click='更改主题('主题3 ')'/p/div v-foot/template script导出默认{ name : ' mine '，我的，showBack: false } }，methods: { changeTheme(主题){ window。文件。文档元素。setattribute('数据主题'，主题)} }，组件3360 { }/脚本样式作用域lang=' scss ' p { @ include px2rem(宽度，100 px)；@ include px2rem(高度，100 px)；@ include px rem(margin，20px)；浮子：left} p :第一个孩子{底色：红色；} p : th-child(2){底色： # 652 bf5} p :最后一个孩子{背景色： deepskyblue}/样式其实过程和逻辑都比较简单，大家理解一下，有不明白的地方在下方评论区评论，有错误的地方也欢迎大家指出，看到后我会回复

总结

以上所述是小编给大家介绍的某视频剪辑软件中使用厚颜无耻实现换肤功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！