变量

@Variable

说明

. 也称自定义属性

. 声明：使用两个短划线 -- 开始的变量名表示

. 使用：在 CSS 中使用 var() 引用变量；建议同时指定备用值

. 一次定义、多次使用；适合一个属性值在多处被使用；相当于定义了一个当前CSS文件内的全局变量

. 优势：方便运维，特别适合全站换肤

. 变量的使用经常配合计算函数 calc() 使用

. 更多信息，请访问玩转 CSS 变量

全局变量

. 在CSS中，使用根选择器 :root 声明，页面内所有元素都可使用；:root 是 <html> 的一个属性

:root {
    --main-color: #f40;
    --main-layout: repeat(3, 1fr);
}

.wrap {
    display: grid;
    grid-template-columns: var(--main-layout);
    color: var(--main-color, #fff);
}

@media screen and (max-width:768px) {
    :root {
        --main-layout: 1fr;
    }
}

. 也可以在元素的内联样式中使用

<span style="color: var(--main-color);">Lorem.</span>

局部变量

. 在 CSS 中，如果变量定义在某个选择器，则只有该选择器选中的元素和它的所有后代元素使用

.wrap{
    --el-color: #890;
}

内联变量

. 在 HTML 元素中，使用内联样式 style 定义的变量，供当前元素在 CSS 使用

<div style="--alpha:0">0</div>

el{
  opacity: var(--alpha, 0.4);
}

[] 教学评价、技能条

. 每个评价条目仅仅是百分比和提示信息不同

. 使用伪元素分别显示百分比和提示信息

<div class="grid">
  <div class="per" style="--per:10%;" data-cont="考勤10%"> </div>
  <div class="per" style="--per:30%;" data-cont="作业30%"> </div>
  <div class="per" style="--per:60%;" data-cont="考试60%"> </div>
</div>

.per::before {
  content: '';
  width: var(--per, 100%);
  height: 100%;
  border-radius: 2rem;
  background-color: #f40;
  transform-origin: left center;
}

.per::after {
  content: attr(data-cont);
  color: #f40;
  margin-right: 1rem;
}

[] 使用 JavaScript 与 :root 交互

获取 :root - 相当于整个 <html>

let root = document.documentElement;

或直接获取 :root 节点

let root = document.querySelector(':root');

. 获取元素节点，使用其特定属性，如颜色去修改变量的值，达到换肤的效果

. 也可以使用自定义属性绑定颜色值

let mixer = document.querySelectorAll('.mixer span');
mixer.forEach(item => {
    item.addEventListener('click', (e) => {
        console.log(e.target.style.backgroundColor);
        root.style.setProperty('--main-color', e.target.style.backgroundColor)
    })
})

修改变量可以快速实现批量调整

为变量指定特定的值可以使用条件渲染，如1或0