css 自定义变量 var()案例分析
发布时间：2024-08-28 16:49:50 作者：Z_Wonderful 
我要评论
我要评论这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧
现在新版本的UI框架，基本使用CSS变量
css的一个函数：var()，此函数在有些场景下能优化不少代码量。
var() 介绍
借用下W3C的定义：
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
案例
案例一：作为全局css变量
我们知道在 less 和 sass 中是可以自定义css变量的，实际通过css的 :root 也可以定义公共样式变量 。变量名必须以--开头。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
/* 自定义背景颜色 */
--dome-bg-color: #f24;
/* 自定义边框 */
--dome-border: 1px solid red;
/* 自定义文字大小 */
--dome-font-size: 50;
}
div {
width: 200px;
aspect-ratio: 1/1;
}
div[class="box1"] {
background-color: var(--dome-bg-color); //f24
border: var(--dome-border); //1px solid red
}
div[class="box2"] {
background-color: #aaa;
font-size: calc(var(--dome-font-size) * 1px); //50*1px
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>通过以上案例发现，只需要把自定义css变量以 --key: value的形式定义在 :root中，就可以在子元素里任意使用。
:rootCSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，优先级比 html更高。
案例二：作为自身属性使用
我们还可以把变量定义在自身元素的style内联样式中，在单独的css里可以获取到这个变量，例如：
<html>
<head>
<style>
div {
color: var(--a);
}
</style>
</head>
<body>
<div style="--a:red">box</div> //等于 color:res;
</body>场景：
<style>
li{
color: var(--i);
background-color: var(--bg);
}
</style>
<ul>
<li style="--i:30;--bg:#B0C24C;"></li>
<li style="--i:-15;--bg:#FB9493;"></li>
<li style="--i:20;--bg: #059F77;"></li>
<li style="--i:-27;--bg: #76CBF0;"></li>
<li style="--i:10;--bg: #FEB18D;"></li>
</ul>UI框架css变量
//1
<t-button ghost size="large" style="--td-button-border-radius:24rpx">幽灵按钮</t-button>
//2
<t-button ghost size="large" class="dome-radius">幽灵按钮</t-button>
//css
.dome-radius{
--td-button-border-radius:24rpx;
}总结
使用:root可以在css中创建全局样式变量。通过 :root本身写的样式，相当于 html，但优先级比后者高。
var()函数在特点场景下能优化很多冗余代码（一组元素下，需要针对每个元素写结构相同但值不同的css）。
经过测试，发现· style=“–”· 具有继承性，父元素定义的自身属性，子元素也是可以通过 var()函数来使用的。
到此这篇关于css 自定义变量 var()的文章就介绍到这了,更多相关css 自定义变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 有时候我们需要动态变换一些皮肤就可以使用这个root定义不同的颜色实现不同的皮肤，下面脚本之家小编就为大家分享一下简单逻辑,需要的朋友可以参考下2023-06-15
- 当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，这篇文章主要介绍了你真的2019-01-15
最新评论