css主题适配

前言

本身在项目中作过主题适配，以及遇到过一些坑。记录一下目前以为成熟的主题适配。

方式

主题的适配的姿式蛮多的，能找到一种优雅的姿式能少些很多代码。 我更喜欢经过变量来控制主题的切换，而不是针对每个样式都作主题适配。就像javascript中的函数同样，只须要输入变量值，就会返回相应的计算结果。成年人优雅很重要，下面介绍两种优雅又简单的方式：

• css3变量-主题
• less变量-主题

css3变量-主题

基础使用

css3特性之一css变量横空出世，用法很简单。声明变量的时候，变量名前面要加两根连词线（--）。CSS变量定义语法是：--color，变量使用语法是：var(--color)，其中color就是变量的名称。例如：

body {
    --color: #eb4339;
    --bk-color: #d2d2d2;
    div {
        font-size: 12px;
        color: var(--color);
        border-color: var(--color);
        background-color: var(--bk-color);
    }
}
复制代码

在上面的代码中申明了--color和--bk-color两个变量并使用。

做用域

同一个 CSS 变量，能够在多个选择器内声明。读取的时候，优先级最高的声明生效。这与CSS的"层叠"（cascade）规则是一致的。

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}
复制代码

上面代码中，变量--foo的做用域是body选择器的生效范围，--bar的做用域是.content选择器的生效范围。

全局的变量一般放在根元素:root里面，确保任何选择器均可以读取它们

:root {
  --main-color: #06c;
}
复制代码

主题适配

基于css做用域，实现主题主题适配的思路是经过环境判断为变量设置不一样的值。能够动态经过设置动态class实现，也能够经过javascript设置不一样class或改变全局变量赋值来实现。

1. 法一设置不一样的class

<!--css-->

.theme_red {
    --color: red;
}
.theme_blue {
    --color: blue;
}

div {
    background-color: var(--color);
}
复制代码

<!--javascript-->
let theme = 'theme_red'
div.classList.add(theme)
// 支持classList属性的游览器有firefox3.6+和chrome
复制代码

若是是基于vue动态绑定calss更简单

<div :class="theme"></div>

<!--vue-->
created () {
    if (...) {
        this.theme = 'theme_red'
    }
}
复制代码

css3变量-主题是一种十分友好的主题适配方式，但也有一个缺点，那就是兼容性，ios9.3+ 、 **android6+**才支持。曾经由于这个不兼容的问题半夜起来临时修复。。。~ ~。修复方案就是采用 less变量-主题。

推给你们一个查询css兼容性的网站：can i user

less变量-主题

less变量主题由less变量和less函数构成，使用更加灵活。经过加载不一样的class加载不一样的函数,目前是较好的方式。

.theme (@color) {
  button {
    border: 1px solid @color;
    color: @color;
  }
}

.theme_red {
  .theme(@color: red);
}
.theme_blue {
  .theme(@color: blue);
}
复制代码