PHP小码农

Appearance

变量与计算 ​

CSS 变量（Custom Properties） ​

定义与作用 ​

语法 ​

作用域与继承 ​

变量的动态性 ​

CSS 计算（calc() 函数） ​

定义与作用 ​

语法 ​

使用场景 ​

限制 ​

CSS 变量与 calc() 的结合 ​

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

css
:root {
    --gap: 16px;
}

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

进阶特性 ​

CSS 变量的嵌套与组合 ​

与媒体查询配合 ​

层叠与优先级 ​

常见使用场景 ​

主题切换 ​

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);
}

动态间距与大小调整 ​

css
:root {
    --spacing: 1rem;
}

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

响应式字体 ​

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

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

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

总结 ​

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