css自定义属性（--xxx）是浏览器原生支持的运行时变量，可被javascript动态读写并触发重绘；sass变量（$xxx）是编译期占位符，构建后固化为静态值，无法运行时修改——前者依赖层叠继承与calc()运算，后者支持编译期算术与逻辑但无运行时能力。

什么是CSS自定义属性，和Sass变量有什么区别？

CSS自定义属性（--brand-color）是原生浏览器支持的运行时变量，不是编译期替换。它必须声明在选择器作用域内（通常用 :root 实现全局），且能被JavaScript动态读写；而 Sass 的 $primary-color 在构建时就被替换成具体值，无法在运行时修改。

关键区别在于：自定义属性依赖级联和继承，值可以被子元素覆盖；Sass变量一旦定义就固定不变。如果你需要主题切换、暗色模式或用户偏好适配，必须用 CSS 自定义属性。

如何在:root中正确定义品牌颜色变量？

所有品牌色变量应统一放在 :root 伪类里，确保全局可访问。注意命名规范、初始值有效性，以及避免意外继承污染。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 变量名必须以 -- 开头，例如 --brand-primary、--brand-secondary
• 值必须是合法 CSS 值，比如 hsl(210, 70%, 50%) 比 rgb(30, 120, 255) 更易后期调整明度/饱和度
• 不要在 :root 中写 color: var(--brand-primary) 这类声明——它不生效，因为 :root 不是渲染元素
• 推荐搭配 prefers-color-scheme 媒体查询做基础暗色支持，例如：

  :root {
    --brand-primary: #3b82f6;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --brand-primary: #60a5fa;
    }
  }

怎么在组件中安全使用var()引用这些变量？

直接写 color: var(--brand-primary) 很简单，但容易因拼写错误、未定义或作用域丢失导致回退失效。

• 始终提供 fallback 值：用 var(--brand-primary, #3b82f6)，避免变量未定义时样式崩塌
• 不要在 @keyframes 或 @font-face 中使用 var() —— 它们不支持运行时变量
• 计算属性如 calc(1rem + var(--space-md)) 要确保 --space-md 是长度单位（如 0.75rem），否则会解析失败并静默丢弃整条声明
• 如果变量用于 border、box-shadow 等复合属性，注意 fallback 必须语法完整，例如：border: 1px solid var(--brand-primary, #3b82f6)

为什么JavaScript读写CSS变量有时不生效？

常见问题不是语法错，而是时机或作用域不对。DOM 元素上设置的变量只影响其后代，:root 才真正“全局”。

• 读取要用 getComputedStyle(document.documentElement).getPropertyValue('--brand-primary')，不能直接查 style 属性
• 写入推荐用 document.documentElement.style.setProperty('--brand-primary', '#8b5cf6')，而不是操作 style.cssText
• 动态改完后，若希望立即重绘，某些场景需触发 reflow（比如读一次 offsetHeight），但多数情况浏览器自动处理
• 注意 SSR 环境下，服务端无法执行 JS 设置变量，需靠初始 HTML 中的 <style>:root{--brand-primary:#3b82f6}</style> 保证首屏正确

实际项目里最容易被忽略的是 fallback 值的语义合理性——比如把 var(--brand-error, red) 写成 var(--brand-error, #ff0000)，看似一样，但后者在高对比度模式下可能无法被系统正确映射为语义化错误色。变量不只是“换个写法”，它承载了设计系统的一致性契约。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！