CSS变量

[xszi]

CSS变量

1. 语法

/* 声明 */
:root {
    --color: red;
}

body {
    --font-size: 12px
}

/* 最基本的使用 */
.my-div {
    color: var(--color);
    font-size: var(--font-size);
}

/* 带默认值 */
.my-div {
    color: var(--color, yellow);
    font-size: var(--font-size, 12px);
}

/* 遍历套娃 */
:root {
    --primary-color: red;
}

.button-container {
    --button-color: var(--primary-color);
}

.button {
    color: var(--button-color)
}

2. 继承和优先级

• 优先级判定和一般选择器相同
• 节点可继承所有直系祖先节点直至root(HTML)节点

3. 与JS交互

// 获取
element.style.getPropertyValue('--var-name');

// 设置
element.style.setProperty('--var-name', value);

// 移除
element.style.removeProperty('--var-name')

4. 使用场景

• 复杂的复合属性，如transform, transaction, font等
• 设计器（disigner.html）