变量与计算

CSS 变量（Custom Properties）

定义与作用

语法

作用域与继承

变量的动态性

CSS 计算（calc() 函数）

定义与作用

语法

使用场景

限制

CSS 变量与 calc() 的结合

CSS 变量与 calc() 可以结合使用，提升灵活性：

:root {
    --gap: 16px;
}

.container {
    padding: calc(var(--gap) / 2);
    margin: calc(100% - var(--gap));
}

进阶特性

CSS 变量的嵌套与组合

与媒体查询配合

层叠与优先级

常见使用场景

主题切换

:root {
    --bg-color: white;
    --text-color: black;
}

.dark-mode {
    --bg-color: black;
    --text-color: white;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

动态间距与大小调整

:root {
    --spacing: 1rem;
}

.box {
    margin: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) / 2);
}

响应式字体

:root {
    --base-font-size: 16px;
}

html {
    font-size: var(--base-font-size);
}

@media (max-width: 768px) {
    :root {
        --base-font-size: 14px;
    }
}

总结

CSS 变量 提供了样式的灵活复用和动态调整能力，calc() 则增强了属性值的动态计算能力。二者结合使用，可以显著提高 CSS 的可维护性和功能性，是现代前端开发的重要工具。