CSS var() 函数

原文地址:http://www.linzichen.cn/article/1570004282466369536

偶然一次发现了css的一个函数:var(),大致了解了下,发现此函数在有些场景下能优化不少代码量。

var() 介绍

借用下W3C的定义:

var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。

只听文字介绍可能并不清楚,直接上案例就一目了然了。

案例

案例一:作为全局css变量

我们知道在 less 和 sass 中是可以自定义css变量的,实际通过css的 :root 也可以定义公共样式变量 。
变量名必须以 -- 开头

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        :root {
            /* 自定义背景颜色 */
            --custom-bg-color: #ccc;
            /* 自定义边框 */
            --custom-border: 1px solid red;
            /* 自定义文字大小 */
            --custom-font-size: 50;
        }
        div {
            width: 200px;
            aspect-ratio: 1/1;
        }
        div[class="box1"] {
            background-color: var(--custom-bg-color);
            border: var(--custom-border);
        }
        div[class="box2"] {
            background-color: #aaa;
            font-size: calc(var(--custom-font-size) * 1px);
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

效果如下:
全局.png

通过以上案例发现,只需要把自定义css变量以 --key: value的形式定义在 :root中,就可以在子元素里任意使用。

:root CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,优先级比 html更高。

案例二:作为自身属性使用

我们还可以把变量定义在自身元素的style内联样式中,在单独的css里可以获取到这个变量,例如:

<html>
<head>
    <style>
        div {
            color: var(--c);
        }
    </style>
</head>
<body>
    <div style="--c:red">box</div>
</body>

自身变量.png

目前来看这个用法有点鸡肋,还不如直接在行内样式中写 color: red; 来的方便。事实确实如此,但是在特点场景下,用自身属性的方式要优于行内样式:

当在一组元素的场景下,我们需要针对每个元素根据自身的属性去写css的时候,此时尤其适合使用 var()函数

比如现在有一组 <li>标签,它们有各自的 backgroundColor,我们需要针对每个 <li>生成自己的 ::before
伪元素,且伪元素的背景色需要跟 <li>相同。这种情况下,如果不用 var(),那么我们需要写多段伪元素代码,例如:

li:nth-child(1)::before{
}
li:nth-child(2)::before{
}
…………
li:nth-child(n)::before{
}

再者,如果我们想要对每一组 <li>元素,根据自身的 rotate值去做一个 旋转动画,每个 <li> 旋转的角度不同,这种情况如果不用 自身属性 + var()函数的话,那代码量是极大且冗余的。例如我们想实现以下效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLFvvA5v-1665928821064)(https://leolinzc-1300447627.cos.ap-nanjing.myqcloud.com/%E5%8A%A8%E7%94%BB.gif)]

var() + 自身属性实现以上效果,思路如下:

  • 对每一个 <li>定义两个属性,一个背景颜色--bg,一个旋转角度--i
  • 左上角的圆圈用伪元素实现,背景色通过 var(--bg)来实现。
  • 定义动画时,rotate 也通过 var(--i) 变量来定义。
<!DOCTYPE html>
<html lang="en">
<head>
    <title>旋转动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        ul {
            display: flex;
            justify-content: space-around;
            width: 1500px;
            margin: 150px auto;
        }
        li {
            position: relative;
            width: 200px;
            aspect-ratio: 1/1;
            background-color: var(--bg);
            animation: animate  1.5s ease-in-out  infinite alternate;
            transform-origin: left top;
            border-radius: 20px;
            box-shadow: 0 0 10px var(--bg);
        }
        li::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--bg);
        }
        @keyframes animate {
            0% {
                transform: rotate(calc(var(--i) * 1deg));
            }
            100% {
                transform: rotate(calc(var(--i) * -1deg));
            }
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

总结

使用:root可以在css中创建全局样式变量。通过 :root本身写的样式,相当于 html,但优先级比后者高。

var()函数在特点场景下能优化很多冗余代码(一组元素下,需要针对每个元素写结构相同但值不同的css)。

经过测试,发现 style="--" 具有继承性,父元素定义的自身属性,子元素也是可以通过 var()函数来使用的。

03-22
<think>好的,用户想了解CSS变量的使用方法或者解决相关问题。首先,我需要回忆一下CSS变量的基本概念和常见用法。CSS变量,也就是自定义属性,允许在样式表中定义可重复使用的值,这对于主题管理和维护大型项目特别有用。 首先,用户可能需要知道如何定义和使用CSS变量。正确的语法是在根伪类或元素中定义变量,比如`:root { --main-color: #06c; }`,然后在需要的地方使用`var()`函数来引用,比如`color: var(--main-color);`。这样有助于保持代码的一致性,方便后续修改。 接下来,用户可能会遇到变量未定义的问题。这时候需要检查变量名是否正确拼写,作用域是否正确。如果变量没有在父元素中定义,子元素是无法继承的。另外,回退值的使用也是一个需要注意的地方,比如`var(--undefined-var, red)`可以在变量未定义时使用红色作为备用。 作用域的问题也是常见的。CSS变量遵循级联规则,如果在父元素中定义的变量,子元素可以继承,但如果在子元素中重新定义同名变量,会覆盖父级的值。例如,在`.container`中定义`--padding: 20px`,然后在子元素`.item`中重新定义为`10px`,这样.item内的padding就会使用新的值。 另外,用户可能会在动态修改变量时遇到困难。这时候可以通过JavaScript来操作,比如使用`document.documentElement.style.setProperty('--main-color', '#f00')`来实时更新变量值,这对于实现主题切换或响应式设计非常有用。 还有可能涉及到浏览器兼容性的问题。虽然现代浏览器大多支持CSS变量,但旧版本可能需要前缀或者回退方案。可以使用`@supports`规则来检测支持情况,并提供备用样式。 用户可能还会疑问如何在媒体查询中使用变量,或者在预处理器如Sass中如何与CSS变量结合使用。这时候需要说明CSS变量和预处理器变量的区别,以及它们各自的适用场景。 最后,可以总结一些最佳实践,比如使用有意义的变量名,合理组织变量的作用域,避免过度使用导致维护困难。同时,结合示例代码和常见问题解答,帮助用户更好地理解和应用CSS变量。</think>### CSS变量的使用方法与问题解决 #### 一、CSS变量的基础使用 1. **定义变量** CSS变量需在声明块内定义,通常建议在`:root`伪类中声明全局变量: ```css :root { --primary-color: #2196F3; --padding-base: 16px; } ``` 2. **使用变量** 通过`var()`函数调用变量: ```css .button { background-color: var(--primary-color); padding: var(--padding-base); } ``` 3. **设置默认值** 若变量未定义,可添加回退值: ```css .error-text { color: var(--error-color, red); /* 若--error-color未定义,显示红色 */ } ``` #### 二、作用域与继承规则 - **全局作用域**:`:root`中定义的变量可在整个文档使用。 - **局部作用域**:在特定选择器中定义的变量仅作用于其子元素。例如: ```css .container { --local-spacing: 8px; } .container > div { margin: var(--local-spacing); /* 仅在.container内有效 */ } ``` #### 三、动态修改变量值 通过JavaScript实时修改变量值,实现动态主题切换: ```javascript document.documentElement.style.setProperty('--primary-color', '#FF5722'); ``` #### 四、常见问题与解决方案 1. **变量未生效** - 检查变量名是否正确(区分大小写) - 确认变量定义在父级作用域中 2. **浏览器兼容性** - 使用`@supports`检测支持性: ```css @supports (--css-vars: 1) { /* 支持CSS变量的样式 */ } ``` - 对于旧版浏览器,需提供备用值: ```css .header { color: #333; /* 备用值 */ color: var(--header-color, #333); } ``` 3. **变量覆盖问题** 若局部变量与全局变量同名,局部变量优先级更高: ```css :root { --text-size: 14px; } .large-text { --text-size: 20px; } /* 局部覆盖全局 */ ``` #### 五、最佳实践 - 使用语义化变量名(如`--font-heading`而非`--fs-16`) - 避免过度嵌套作用域 - 结合预处理器(如Sass)管理复杂逻辑,但保留CSS变量用于动态性需求 #### 示例:主题切换实现 ```css /* 定义主题变量 */ :root { --bg-color: #FFFFFF; --text-color: #212121; } .dark-mode { --bg-color: #121212; --text-color: #FFFFFF; } body { background: var(--bg-color); color: var(--text-color); transition: all 0.3s; /* 平滑过渡 */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值