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 (eg, 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中文網其他相關文章！