css变量计算

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

css变量计算

css变量又称css自定义属性，指可在整个文档中重复使用的值，它是由自定义属性 --var与函数var()组成的，var()函数用于引入自定义属性

使用css变量有几点优点:

• 减少样式代码的重复性
• 增加样式代码的扩展性
• 提高样式代码的灵活性
• 增加一种CSS与JS的通讯方式
• 无需深层遍历DOM改变某个样式

认识css变量

声明： --变量名

读取: var(--变量名，默认值)

类型:

普通：只能用作属性值不能用作属性名

字符：与字符串拼接，"Hello, "var(--name)

数值：使用calc()与数值单位连用，var(--width) * 10px

作用域

范围：在当前节点块作用域及其子节点块作用域中有效

优先级别：内联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 = 兄弟选择器 = 后代选择器

其变量的规范和用法也可参考阮一峰老师的教程link.juejin.cn/?target=htt…

使用场景

变量如果结合list集合使用，将会大大减少代码量。下面写一个条形加载条

首先是不实用变量

<ul class="strip-loading">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1s ease-in-out infinite;
        & + li {
            margin-left: 5px;
        }
        &:nth-child(2) {
            animation-delay: 200ms;
        }
        &:nth-child(3) {
            animation-delay: 400ms;
        }
        &:nth-child(4) {
            animation-delay: 600ms;
        }
        &:nth-child(5) {
            animation-delay: 800ms;
        }
        &:nth-child(6) {
            animation-delay: 1s;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

我们在写的时候会发现，每个li只是animation-delay不同，其他都相同，如果有跟多集合则会很麻烦，所以我们就可以插入css变量。

<ul class="strip-loading">
    <li style="--line-index: 1;"></li>
    <li style="--line-index: 2;"></li>
    <li style="--line-index: 3;"></li>
    <li style="--line-index: 4;"></li>
    <li style="--line-index: 5;"></li>
    <li style="--line-index: 6;"></li>
</ul>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

通过插入变量缩减了代码量，而且还易于修改和维护代码