CSS变量的介绍及使用

目录

一. CSS变量介绍

二. CSS变量声明

三. var() 函数

四. CSS变量可选的类型

4.1 CSS 变量可以接受任何值

4.2 如果变量值是一个字符串，则可以与其他字符串拼接

4.3 如果变量值带有单位，就不能写成字符串

4.4 如果变量值是数值，须使用 calc()函数，将数值及单位连接

4.5 当 CSS变量值 不合法时，则采用缺省值（默认值）

五. CSS变量的作用域

六. JS 操作 CSS变量

6.1 设置变量值 setProperty(name, val)

6.2 获取变量值 getPropertyValue(name)

6.3 计算样式 getComputedStyle()

6.4 删除变量 removeProperty()

七. 处理 IE 兼容性问题（css-vars-ponyfill）

---

一. CSS变量介绍

• CSS变量，也被称为 —— CSS自定义属性
• 使用 自定义属性 来设置变量名，通过 var() 函数 使用自定义变量

---

• CSS变量作用：用在有 换肤功能 的项目中，减少样式代码的重复性

• ---

  兼容性：
• 

---

二. CSS变量声明

// 官方css
:root {
  --color: #ff0;
  --background: #f00;
}

// sass
$myColor: red;
h1 {
  color: $myColor;
}

// less
@myColor: #5B83AD;
h1 {
    color: @myColor;
}

• 注意事项：

1. 此处的 :root 表示 根元素
2. 声明变量时，变量名前面要加两根横线 “--”，Sass 使用了 “$”，Less 使用了 “@”
3. 变量名大小写敏感，--color 和 --Color 是两个不同变量
4. CSS变量 不支持 !important

---

三. var() 函数

.box {
  background: var(--background); // 读取 CSS变量
  color: var(--color, #00f); // 添加 CSS变量的默认值
} 


:root {
  --color: #f00;
  --color-word: var(--color); // CSS变量 可以设置 CSS变量值
}

.foo {
  --top: margin-top;
  /* 无效 */
  var(--top): 20px; // CSS变量 不可以设置 CSS变量名
}

• var() 函数的作用：

1. 读取 CSS变量：color: var(--color);
2. 添加 CSS变量的默认值：color: var(--color, #00f);【变量不存在就使用默认值】
3. 根元素下，CSS变量 可以设置 CSS属性值：--color-word: var(--color);
4. 根元素下，CSS变量 不可以设置 CSS属性名：var(--top): 20px;

---

四. CSS变量可选的类型

4.1 CSS 变量可以接受任何值

:root{
  --color: #ff0;
  --background: rgb(255, 0, 0);
  --background: linear-gradient(blue, pink);
  --background: url(cyy.png);
  --border-color: blue;

  --padding: 50px 0;
  --width: calc(100% - 10px);
  --height: 200px;

  --content: "伪元素在这里哦！";
}

---

4.2 如果变量值是一个字符串，则可以与其他字符串拼接

:root{
  --content: "伪元素在这里哦！";
}

// 如果变量值是一个字符串，则可以与其他字符串拼接
.box::after {
  content: var(--content)"我在后面呢";
}

---

4.3 如果变量值带有单位，就不能写成字符串

/* 无效 - 如果变量值带有单位，就不能写成字符串 */
.box {
  --size: '20px';
  font-size: var(--size);
}

/* 有效 - 如果变量值带有单位，就不能写成字符串 */
.box {
  --size: 20px;
  font-size: var(--size);
}

---

4.4 如果变量值是数值，须使用 calc()函数，将数值及单位连接

• 由于 CSS变量的 “空格尾随特性”，在变量被转换为 CSS属性值后，后面会加一个空格，导致后面加单位没用
• 因此，必须使用 calc()函数，将数值和单位连接
• 也可以采用上面的方法，直接写 20px

/* 无效 */
.box {
  --top: 20;
  margin-top: var(--top)px;  // 相等于20 px
}

/* 有效 */
.box {
    --top: 20;
    margin-top: calc(var(--top) * 1px);
}

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

---

4.5 当 CSS变量值 不合法时，则采用缺省值（默认值）

// 转换前
body {
    --color: 20px;
    background-color: #369;
    background-color: var(--color, #cd0000);
}

// 转换后
body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

• 对于 CSS 变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析
• 如果发现变量值是不合法的，则使用背景色的缺省值（默认值）代替

• ---

  默认值示例：

1. background  默认值是  transparent
2. width  默认值是  auto
3. position  默认值是  static
4. opacity  默认值是  1
5. display  默认值是  inline

---

五. CSS变量的作用域

• 同一个 CSS变量，可以多次在不同处声明；读取时，优先级最高的声明生效
• 变量的作用域，就是它所在的选择器的有效范围，因此，全局变量通常放在 根元素:root  里，确保任何选择器都可以读取它们

• ---

  总结：

1. 范围：在当前元素块作用域及其子元素块作用域下有效
2. 优先级别：内联样式 > ID 选择器 > 类选择器 > 标签选择器 等等

<style>
  :root {
    --color: blue;
  }
  div {
    --color: green;
  }
  .box {
    --color: red;
  }
  p, div {
    color: var(--color);
  }
</style>

<p>蓝色</p>
<div>绿色</div>
<div class="box">红色</div>

---

六. JS 操作 CSS变量

6.1 设置变量值 setProperty(name, val)

• setProperty(name, val)：第一个值代表变量名，第二个值代表变量值
• document.body.style.setProperty("--color", "#f00");

---

6.2 获取变量值 getPropertyValue(name)

• document.body.style.getPropertyValue("--color");

---

6.3 计算样式 getComputedStyle()

// css
:root {
  --color: blue;
}

// js
var body = getComputedStyle(document.body); // 获取计算样式
var variableColor = body.getPropertyValue('--color');
console.log(variableColor); // blue

• 可以将此方法简单的理解为 document.getxxx.style

---

6.4 删除变量 removeProperty()

• document.body.style.removeProperty("--color");

---

七. 处理 IE 兼容性问题（css-vars-ponyfill）

• 使用 css-vars-ponyfill 处理 IE 兼容性问题

// 首先引入插件的js
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>;

// 再调用插件的方法
cssVars({});

• 其他用法请参考官方网址：https://www.npmjs.com/package/css-vars-ponyfill