其实很多人说scss换色,想着很复杂,其实不然,scss解析到页面后还是css,所以所谓scss换色,还是一种css换色的方法!
原理其实就是这样!
p.a{ color:#333;} p.b{ color:res;} p.c{ color:blue;}
所以他的原理其实还是通过css添加class来更换风格,而scss只是让你更快更方便的写好这些css,只有明白了这个,才能继续!
还有一种原理,也是我最近在一个开源项目内发现的,觉得也非常惊艳,就是动态往<head></head> 结尾插入style,由于网页css的加载,是最后出现的css 优先级是最高的!
本文的话,讲述上述2种换色方法,一种是指定颜色换色,一种的话就是那种开源项目内学的,就随便选颜色换色! 其他的方法,无非换汤不换药的就这2种原理!
一、第一种指定颜色变色,易于维护,可塑性强
1、实现变色
这里先说一个css诀窍!
css中 [ ] 可以识别到在html标签上设置的属性,所以在html上对应属性发生变化时,就会执行相应的样式,
这一步有点类似于平时给div添加一个.active属性,css自动执行相应样式。
本文的话是主要通过[] 来给css切换的,你也可以自己拿css切换,效果是一样的!
例子:
<html data-theme="theme1">
css
[data-theme="theme1"] p { color: red; } [data-theme="theme2"] p { color: blue; }
那么我们就只要在html上面修改 data-theme="theme2" 就可以让p变成蓝色!
然后就是修改的方法了
<p @click="changeTheme('theme2')">111</p> changeTheme (theme) { window.document.documentElement.setAttribute('data-theme', theme) }
至此我们实现了css的换肤变色功能了! 其他要改的颜色你自己加前缀就行了!
2、用scss来更方便的编写!
1、我们设定了4个风格!(多的自己加就行了!)
// 先设定一些颜色风格 // 先设定默认风格的几种颜色 $font-color-theme : #3f8e4d;//字体主题颜色默认 $font-color-theme1 : red;//字体主题颜色1 $font-color-theme2 : #652BF5;//字体主题颜色2 $font-color-theme3 : deepskyblue;//字体主题颜色3 //默认几种背景的颜色,如导航栏等! $background-color-theme: #3f8e4d;//背景主题颜色默认 $background-color-theme1: red;//背景主题颜色1 $background-color-theme2: #652BF5;//背景主题颜色2 $background-color-theme3: deepskyblue;//背景主题颜色3
2、设定函数方法
// 通过该函数设置字体颜色,后期方便统一管理 @mixin font_color($color){ color:$color; [data-theme="theme1"] & { color:$font-color-theme1; } [data-theme="theme2"] & { color:$font-color-theme2; } [data-theme="theme3"] & { color:$font-color-theme3; } } // 通过该函数设置统一的背景颜色 @mixin bg_color($color){ background-color:$color; [data-theme="theme1"] & { background-color:$background-color-theme1; } [data-theme="theme2"] & { background-color:$background-color-theme2; } [data-theme="theme3"] & { background-color:$background-color-theme3; } }
3、使用方法
//比如我们要设定头部的背景色 .header{ @include bg_color(#333); // 默认是333 padding: 15px; }
4、全部代码
// 通过该函数设置字体颜色,后期方便统一管理 @mixin font_color($color){ color:$color; [data-theme="theme1"] & { color:$font-color-theme1; } [data-theme="theme2"] & { color:$font-color-theme2; } [data-theme="theme3"] & { color:$font-color-theme3; } } // 通过该函数设置统一的背景颜色 @mixin bg_color($color){ background-color:$color; [data-theme="theme1"] & { background-color:$background-color-theme1; } [data-theme="theme2"] & { background-color:$background-color-theme2; } [data-theme="theme3"] & { background-color:$background-color-theme3; } } // 先设定一些颜色风格 // 先设定默认风格的几种颜色 $font-color-theme : #3f8e4d;//字体主题颜色默认 $font-color-theme1 : red;//字体主题颜色1 $font-color-theme2 : #652BF5;//字体主题颜色2 $font-color-theme3 : deepskyblue;//字体主题颜色3 //默认几种背景的颜色,如导航栏等! $background-color-theme: #3f8e4d;//背景主题颜色默认 $background-color-theme1: red;//背景主题颜色1 $background-color-theme2: #652BF5;//背景主题颜色2 $background-color-theme3: deepskyblue;//背景主题颜色3 //比如我们要设定头部的背景色 .header{ @include bg_color(#333); // 默认是333 padding: 15px; }
main.js内引入
import '@/styles/index.scss' // 全局css
页面内实现吧!
<template> <div> <div class="header"> 头部 </div> <button @click="changeTheme('theme1')">变色1</button> <button @click="changeTheme('theme2')">变色2</button> <button @click="changeTheme('theme3')">变色3</button> </div> </template> <script> export default { name: 'Header', methods: { changeTheme (theme) { window.document.documentElement.setAttribute('data-theme', theme) } } } </script>
5、小技巧
再交你们一个小技巧吧!因为你变换了背景色!所以字体颜色肯定会变化了! 有时候想偷懒,就如下方法吧!
// 根据传入的颜色,来判断颜色的亮度,如果深色就文字颜色为白色! 否则为#333! @mixin font-color($a){ @if lightness($a) >= 60% { color: #333; }@else{ color: #fff; } }
然后再背景颜色函数内插入就行了!
// 通过该函数设置统一的背景颜色 @mixin bg_color($color){ background-color:$color; [data-theme="theme1"] & { background-color:$background-color-theme1; @include font-color($background-color-theme1);// 插入在这里! } [data-theme="theme2"] & { background-color:$background-color-theme2; } [data-theme="theme3"] & { background-color:$background-color-theme3; } }
二、随意选择颜色变色
原理:这玩意原理其实很简单!
1、你页面会引入一个css
2、你获取这个css链接里面的内容!
3、然后比如你所有的成功按钮设置成了#4444444;
4、然后你用js 替换下所有的#444444为用户选取的那个颜色,当然还有一些复杂的hover的颜色啊!之类的,也需要更改下
5、然后输出到</head>前面!即可!
接下来,来实现下吧!我们先引入element的一个颜色选取器!