CSS自定义属性的完整指南（变量）

CSS Custom Properties（CSS变量）是原生、动态且可被JavaScript操作的样式值，用于替代重复的CSS值并实现主题切换、组件隔离和响应式设计。1. 声明在:root中定义全局变量（如--primary-color: #3498db），用var()函数调用（如background-color: var(--primary-color)）；2. 支持级联与继承，可在组件或媒体查询中覆盖（如@media中修改--gap）；3. 可通过JavaScript动态更新（如document.documentElement.style.setProperty('--primary-color', 'hotpink')），无需重新编译，适用于主题切换、用户偏好设置及动画交互。注意使用kebab-case命名、提供备用值（如var(--text, black)）并避免循环引用。

CSS Custom Properties—often called CSS variables—are a powerful feature that let you store and reuse values across your stylesheets. Unlike preprocessor variables (like in Sass), they’re native to CSS, dynamic, and can be manipulated with JavaScript. If you’ve ever repeated the same color or spacing value dozens of times in your CSS, custom properties are your solution.

Here’s everything you need to know—from basics to advanced use cases.

✅ What Are CSS Custom Properties?

Custom properties are declared using a double dash (--) prefix:

:root {
  --primary-color: #3498db;
  --spacing: 1rem;
}

• :root is the best place to define global variables (applies to all elements).
• You access them using the var() function:

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

They cascade and inherit, just like regular CSS properties—so you can override them per component or media query.

? Why Use Them Over Sass/Less Variables?

Example: change theme on button click with JS:

document.documentElement.style.setProperty('--primary-color', 'hotpink');

? Instant visual update—no recompilation needed.

? Practical Use Cases

1. Theme Switching

Store theme values in :root, then swap them on demand:

:root {
  --bg: #fff;
  --text: #333;
}

[data-theme="dark"] {
  --bg: #222;
  --text: #f5f5f5;
}

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

Toggle via JS:

document.body.dataset.theme = 'dark';

2. Component-Level Variables

Isolate styles for reusable components:

.card {
  --card-padding: 1.5rem;
  --card-border: 1px solid #ddd;

  padding: var(--card-padding);
  border: var(--card-border);
}

Now each .card instance can override its own padding or border without affecting others.

3. Responsive Design

Use media queries to change variables—not entire rules:

:root {
  --gap: 1rem;
}

@media (min-width: 768px) {
  :root {
    --gap: 2rem;
  }
}

.grid {
  gap: var(--gap); /* Automatically updates */
}

Cleaner than rewriting every gap declaration per breakpoint.

⚠️ Common Pitfalls & Tips

• Always provide fallbacks in case a variable is undefined:

  color: var(--text, black); /* black if --text not set */

• No camelCase—stick to kebab-case (--main-color, not --mainColor).

• Avoid circular references—this will break:

  --a: var(--b);
  --b: var(--a); /* ? Infinite loop */

• Use in animations? Yes—but only if the property supports interpolation (like opacity, not display).

?️ Bonus: JavaScript Integration

Read and write custom properties easily:

// Read
getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Write
document.documentElement.style.setProperty('--primary-color', 'purple');

Use this for:

• User preferences (theme, font size)
• A/B testing UI variants
• Animating values with JS (e.g., parallax effects)

That’s it!
CSS custom properties aren’t just about DRY code—they enable dynamic, maintainable, and interactive styles. Start small: replace repeated colors or spacing values. Then scale up to full theming or responsive logic.

No build step. No dependencies. Just modern, native CSS.

以上是CSS自定义属性的完整指南（变量）的详细内容。更多信息请关注PHP中文网其他相关文章！