vue scss变色换肤功能!详细讲解原理方法

其实很多人说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的一个颜色选取器!



相关内容

发表评论

验证码:
点击我更换图片

最新评论