css变量换肤方案

一、方案具体实现思路

1.CSS全局变量

⦁ 介绍
⦁ https://www.w3school.com.cn/css/css3_variables.asp
2.Js （对变量进行处理成需要的数据）
二、CSS变量使用方法
1.变量声明
1.1声明变量的时候，变量名前面要加两根连词线（–）

h2{
    /* 变量声明 */
    --font-size: 14px;
}
/*  CSS 变量 可以使用的值 */
:root{
  --color: red;
  --background: rgb(255, 255, 255);
  --logo-border-color: yellow;
  --h1-height: 68px;
  --wrap-padding: 10px 20px;
  --line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
  --attention-color: linear-gradient(270deg, #e08d2d 0%, #f09d30 100%);
  --buttonL-background: url('./images/ic_setting_nor1.png') #3d5066;
  --user-radar-bg-img: url('https://store.is.autonavi.com/showpic/22e37680e69cb9832b780ed901d46b51') rgba(103,106,125, 0.1);
  --font-family: Times New Roman,Georgia,Serif;
}
/* 变量名大小写敏感，--color 和 --Color是两个不同变量,背景图片可以使用本地图片也可以使用云端地址 */

2.var() 函数的用途

var(name,value )函数用于读取变量:
name：变量名，必填，没有默认值情况下不填会导致不能正常显示
value: 默认值，可选，如果第一个参数不存在时，就会使用这个默认值。默认值也可以提成变量，但使用是要加var

2.1 第一个参数的使用

:root{
  --color: red; 
}
/* 没使用默认值 */
h2{
    --font-size: 14px;
    font-size:var(--font-size);
    color:var(--color);
}
/* 使用默认值*/
h2{
   color: var(--color, #7F583F); /* 第二个参数直接写 */
   color: var(--color, var(--color)); /* 第二参数使用变量做为参数*/
}

2.2 第二个参数使用

不处理的逗号或空格，都视作参数的一部分。

Markdown
:root{
  --color: red; 
  --font-stack:
  --font-family: Times New Roman,Georgia,Serif;
  --pad: 20px;
}
h2{
   color: var(--color, #7F583F); /* 第二个参数直接写 */
   color: var(--color, var(--color)); /* 第二参数使用变量做为参数 */
   
   /* 参数不处理内部的逗号或空格，都视作参数的一部分 */
   font-family: var(--font-family, "Roboto", "Helvetica");
   padding:var(--pad, 10px 15px 20px);
}

2.3 var()函数还可以用在变量的声明

Markdown
:root {
  --color: red;
  --text-color: var(--color);
}

 ##### 2.4 变量值只能用作属性值，不能用作属性名
Markdown
div{
  --mar: margin-top;
  /* 不生效 */
  var(--mar): 20px;
}

2.5变量值的类型

2.5.1 字符串类型

可以与其他字符串拼接

Markdown
div{
    --txt: 'hi';
    --content: var(--txt)' Aarn';
}

div:after {
  content: var(--content);
}

2.5.2 数值

定义的变量不能与数值单位直接连用，会不生效

div{
  --gap: 20;
  /* 无效 */
  display:flex；
  margin-top: var(--gap)px;
}
/* 如果非要如上写，必须使用calc()函数 连接*/
 
div{
  --gap: 20;
  /* 无效 */
  display:flex；
  margin-top: calc(var(--gap) * 1px);
}

2.5.3 变量值带有单位就不能写成字符串

/* 无效 */
div {
  --font-size: '20px';
  font-size: var(--font-size);
}

/* 有效 */
div {
  --font-size: 20px;
  font-size: var(--font-size);
}

3. 作用域

3.1 CSS 变量可以在不同的选择器中声明使用的时候，标签选择器优先级最高声明的变量生效

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

<style>
/* :root:全局作用域， 其余的是局部作用域 */
  :root { 
      --color: red;
   }
  div { 
      --color: yellow; 
  }
  #blue { 
        --color: blue; 
   }
  * { 
      color: var(--color); 
   }
</style>
 
<p>p - 红色</p>
<div> div 选择器 - 黄色</div>
<div id="blue"> id="blue"  蓝色 </div>

3.2 作用域使用注意项
在父标签声明变量，子标签可以使用；在字标签声明变量，父标签使用不生效

body{
  --color: red;
  font-size:var(--font-size);
}
div{
  --font-size:26px;
  color:var(--color);
}
span{
  font-size:var(--font-size);
}     

<p>我是P标签</p>
<div>
        我是div标签<br/>
    <span> 我是div内的span</span>
</div>

4.CSS 变量 在响应式布局下的使用
在响应式布局的media命令里面声明变量，可以在不同的屏幕宽度使用不同的变量值。
Markdown

body {
  --theme-color: red;
}
 
div{
  color: var(--theme-color);
}
 
@media screen and (min-width: 500px) {
  body {
    --theme-color:  yellow;
}

5. 使用 JavaScript 更改变量
   获取变量
   Markdown

<style>
:root {
     --testcolor:red;
}
div{
     color: var(--testcolor);
     background:var(--primary);
}
</style>

<div class="mover">s</div>

<script>
   /* 获取CSS变量属性 */
  var divEle=document.querySelector('div');
  
  /* 变量值的函数 */
  var divSty=window.getComputedStyle(divEle);
  
  /* 获取CSS变量的值 */
  var diveleVal=divSty.getPropertyValue('--testcolor');
  
 divEle.innerHTML = diveleVal;
 
 // 设置变量
 divEle.style.setProperty('--testcolor', 'yellow');
 
 // 删除变量
 divEle.style.removeProperty('--testcolor');
 
</script>

三、案例
1.使用步骤
1.1 在public文件下index.html 添加
Markdown

<style id="style"></style>


全局变量声明  需要在 :root 选择器中声明 。 
:root {
  --blue: #1e90ff;
  --white: #ffffff;}

局部变量
h2{
    --font-size: 14px;
    font-size: var(--font-size);
}

1.2 在src文件下配置不同车型的样式json文件

 1.3 JS将配置的车型样式json转化成需要的数据

四、在项目中使用过程遇到的问题

1. var 里面的px值无法转成rem
   使用的是正则的exec，js 提前处理数据
   Markdown

    exec会记住匹配序号，如果第一个匹配值不是同一套数据，就会导致第一个匹配值被占用了，
后面的exec()函数直接从第二个匹配值开始检索
 const defaultCssVal = {
    adventureLog: { //奇遇日志
        "--default-encounter-width": "436px",
        "--default-encounter-height": "64px"
    }
}
const baseFontSize = '16px';
let reg= /(-?\d+)px/g;
reg.exec(baseFontSize );
reg.exec(defaultCssVal );

PS: 这样会导致defaultCssVal 的第一个值匹配不到，因为exec会记住匹配序号，
第一个值被baseFontSize 占用了，会从defaultCssVal第二个值开始匹配
修正：将 baseFontSize 的正则重新定义

2. 在项目中提取背景图片变量
   本地图片：
   需放在打包后的那个文件(public)，不然找不到图片路径，也支持云端图片

五、优点

⦁ 只需写一套CSS代码，适配多种主题
⦁ 可以云端配置（可视化配置）

六、缺点

  布局改动大的情况，不太灵活

浏览器兼容性问题