CSS自定义属性 - 变量的声明与读取

这篇文章由 DeathGhost 编辑，发布于

归类于 Css » 👋分享到微博 当前评论 0 条。

变量这个词在程序开发中基本都会用到，我们可以对其赋值，也可以存储且获取它。如果将其应用在CSS样式表中，又当如何呢？以前大家基本借助SCSS或LESS中变量定义亦或直接定义类。所以，今天看看原生CSS中如何自定义属性（即：CSS变量）应用。

Web前端项目开发过程中都会有大量的CSS代码，通常也会有许多重复的值；许多人在编写过程中都觉得很繁琐。因为产品项目设计过程中字号、颜色、边距及其他都是有一定的统一性，我们会对其预定义；所以为了避免对属性值的重复书写，都会借助外部工具（SCSS/LESS）进行编译处理；优点就是书写方便、好维护；缺点就是得额外配置。

虽然我个人只是简单的借助SCSS编写样式，但不得不说 - 真方便！

CSS自定义属性 - 变量的声明与读取
CSS自定义属性 - 变量的声明与读取

那么，下面了解下关于原生CSS变量的应用。

变量声明

声明一个变量（自定义属性）时，属性名需要以两个减号（--）开始。

element {
  --c-999: #999;
}

上述代码中，在某一元素中定义一个变量为 --c-999 ，值为颜色值。当然，变量可以给其赋任何值（字符串、数字、CSS属性值等等）。

全局性预定义的，一般会定义在根节点（根伪类）。

:root{
  --default-width: 50vw;
  --c-primary: #222;
  --c-666: #666;
  --c-999: #999;
  --f-12: 12px;
  --f-14: 14px;
  --f-16: 16px;
  --step: 5;
}

变量设定完毕后，就需要在设定样式中读取它。

var() 函数读取变量

var() 函数可以代替元素中任何属性中的值的任何部分。var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。

var( <custom-property-name> , <declaration-value>? )

自定义属性的回退值允许使用逗号。即：可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

--c-primary: black;
...
color: var(--non-existent, --c-primary);

自定义属性备用值:: 如果'--non-existent'变量未定义，颜色则为：黑色。

另外，如果声明变量值为数值需要与CSS值进行计算，不能直接使用，如下：

:root{
  --step: 5;
}

假设需要对元素.main设置内边距。

.main{
  padding: var(--step) px;
}
// ❌ 这样设置是无效的

这时，需要CSS中的 calc() 函数进行处理。

.main{
  padding: calc(var(--step) * 1px);
}
// ✔️ 这样设置，方才有效

作用域 - 全局定义 与 局部定义

可以在根部定义，也可以在元素内部定义（或变更值）。如上述:root 或 某一元素下定义。

:root{
  --default-width: 50vw;
}
.main{
  --default-width: 40vw;
}

至于优先级，如上述，.main 类下元素引入优先级高，这个和平时写CSS一致。

内联样式变量重新赋值

根据上述，可以在元素内部定义变量优先级就相应提升；这里还可以对元素style属性重新对变量进行赋值，优先级则进一步提升。

// 全局定义 --c-999: #999 优先级 +1
// footer 下定义 --c-999: #blue 优先级 +1
// 内联重新赋值 优先级 +1
<footer style="--c-999: red">
    <p>footer</p>
    <p >© 2021 DeathGhost</p>
</footer>

所以，最终颜色值将会是 red （红色），在这里，变量名仅示例，字面意思已不合适😅。

JavaScript 读取变量与赋值

可以通过JavaScript获取变量值与更改变量值，优先级方面 +1

获取 --c-999 变量值

<footer style="--c-999: red">
  <p>footer</p>
  <p >© 2021 DeathGhost</p>
</footer>
const footerVar = document.querySelector('footer');
getComputedStyle(footerVar).getPropertyValue('--c-999');

得到的结果将是 red （红色）。

重新对 --c-999 变量赋值 （如：'skyblue' 天蓝色）

footerVar.style.setProperty('--c-999', 'skyblue');
getComputedStyle(footerVar).getPropertyValue('--c-999')

得到的结果将是 skyblue （天蓝色）

获取全局 --c-999 变量值

getComputedStyle(document.documentElement).getPropertyValue('--c-999');

则是：#999

示例代码

<html>
<head>
  <meta charset="utf-8">
  <title>CSS自定义属性 - 变量</title>
  <style>
    /* 根伪类 */
  :root{
    --default-width: 50vw;
    --c-primary: #222;
    --c-666: #666;
    --c-999: #999;
    --f-12: 12px;
    --f-14: 14px;
    --f-16: 16px;
    --step: 5;
  }

    header,
    main,
    footer{
      width: var(--default-width);
      margin: 0 auto;
    }
    
    header{
      font-size: var(--f-16);
    }

    main{
      /* 自定义属性备用值:: 如果'--non-existent'变量未定义，颜色则为：黑色 */
      /* 用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换。 */
      color: var(--non-existent, --c-primary);
      font-size: var(--f-14);
      /* 数值变量可通过calc进行处理；不可以var(--step) px; */
      padding: calc(var(--step) * 1px);
    }

    footer{
      /* 内联样式将会覆盖此定义 （e.g. style="--c-999: red"）*/
      font-size: var(--f-12);
      color: var(--c-999);
    }
  </style>
</head>

<body>
  <header>
    <h1>header</h1>
  </header>
  <main>
    <h2>main</h2>
    <p>main content...</p>
  </main>
<footer style="--c-999: red">
  <p>footer</p>
  <p >© 2021 DeathGhost</p>
</footer>
  <script>
    const footerVar = document.querySelector('footer');
    getComputedStyle(footerVar).getPropertyValue('--c-999');
    console.log('内联重新赋值：', getComputedStyle(footerVar).getPropertyValue('--c-999'));
    footerVar.style.setProperty('--c-999', 'skyblue');
    console.log('JS重新赋值：', getComputedStyle(footerVar).getPropertyValue('--c-999'));
    // 获取全局定义变量
    getComputedStyle(document.documentElement).getPropertyValue('--c-999');
    console.log('获取全局定义变量:', getComputedStyle(document.documentElement).getPropertyValue('--c-999'));
    // 附加
    // scss 变量  $c-primary : #222;
    // scss 变量  @c-primary : #222;
  </script>
</body>
</html>

应用场景

全局元素边距(内外边距"5px"、"10px"、"15px"...)、颜色（"成功"、"失败"、"警告"、"错误"...）、字号("small"、"middle"、"large"...)、响应式（"PC端"、"移动端"...）等页面变量定义。

兼容性

直接点，放弃IE吧，使用现代浏览器均已支持！🙃

CSS CSS variable CSS 自定义属性 CSS变量 var() 函数 calc() 函数 作用域 全局变量 局部变量 复用

上一篇：

下一篇：