什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域
CSS变量能帮助我们干什么
在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
在像CSS这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。
CSS 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量
一、什么是CSS变量
CSS 变量当前有两种形式：
变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量
二、变量的声明
变量的命名
变量声明使用两根连词线--表示变量，$color是属于Sass的语法，@color是属于Less的语法，为避免冲突css原生变量使用--）
注意: 变量名大小写敏感，--header-color和--Header-Color是两个不同变量
声明方式
CSS变量声明的方式非常简单，如下，声明了一个名叫color的CSS变量。
在css文件中写
写在html标签的inline-style里
用JS给某个元素声明，方法.style.setProperty
body{
--color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接
--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数，将它们连接
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}如果变量值带有单位，就不能写成字符串
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);注意: 变量值只能用作属性值，不能用作属性名
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}上面代码中，变量--side用作属性名，这是无效的
三、CSS变量的继承&作用域
自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素
class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>定义下面的CSS：
.two { --test: 10px; }
.three { --test: 2em; }在这个例子中，var(--test)的结果是：
class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值
最顶层的作用域就是:root
四、响应式
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}五、与预处理器的不同
1、预处理器变量不是实时的
$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}编译结果
.mediabox {
background: #7F583F;
}2、预处理器不能限定作用域
$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}编译为
ul {
color: blue;
}3、预处理器变量不可互操作
原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用
六、JS操作变量
CSS 变量可以和 JS 互相交互
:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'七、兼容性
检测浏览器是否支持CSS自定义属性的方法
/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}总结
相较于传统的 LESS 、SASS 等预处理器变量，CSS 变量的优点在于:
CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改
CSS 变量能够继承，能够组合使用，具有作用域
配合 Javascript 使用，可以方便的从 JS 中读/写
相关文章：
相关视频：
以上是什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap怎么看日期
Apr 07, 2025 pm 03:03 PM
答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。
bootstrap日期怎么验证
Apr 07, 2025 pm 03:06 PM
在 Bootstrap 中验证日期，需遵循以下步骤：引入必需的脚本和样式；初始化日期选择器组件；设置 data-bv-date 属性以启用验证；配置验证规则（如日期格式、错误消息等）；集成 Bootstrap 验证框架，并在表单提交时自动验证日期输入。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
bootstrap如何上传文件
Apr 07, 2025 pm 01:09 PM
可以通过 Bootstrap 实现文件上传功能，步骤如下：引入 Bootstrap CSS 和 JavaScript 文件；创建文件输入字段；创建文件上传按钮；处理文件上传（使用 FormData 收集数据，然后发送到服务器）；自定义样式（可选）。
