CSS 变量提升样式的可维护性和灵活性掌握 CSS 变量的核心概念和最佳实践。一、CSS 变量的重要性作为一名追求像素级还原的 UI 匠人我深知 CSS 变量在现代前端开发中的重要性。CSS 变量也称为自定义属性允许我们定义可重用的值提高代码的可维护性和灵活性。从主题管理到响应式设计CSS 变量为我们提供了强大的工具。二、基本概念1. 定义和使用变量/* 定义变量 */ :root { --primary-color: #667eea; --secondary-color: #764ba2; --text-color: #333; --font-size: 16px; --spacing: 20px; } /* 使用变量 */ body { font-size: var(--font-size); color: var(--text-color); background-color: #f5f5f5; } .btn { background-color: var(--primary-color); color: white; padding: 10px var(--spacing); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: var(--secondary-color); }2. 变量作用域/* 全局变量 */ :root { --global-color: #667eea; } /* 局部变量 */ .container { --local-color: #764ba2; background-color: var(--local-color); } /* 局部变量只在容器内部有效 */ .text { color: var(--local-color); /* 无效因为超出作用域 */ color: var(--global-color); /* 有效 */ }三、高级用法1. 变量计算:root { --base-font-size: 16px; --heading-font-size: calc(var(--base-font-size) * 2); --spacing: 20px; --double-spacing: calc(var(--spacing) * 2); } h1 { font-size: var(--heading-font-size); margin-bottom: var(--double-spacing); } p { font-size: var(--base-font-size); margin-bottom: var(--spacing); }2. 变量继承:root { --primary-color: #667eea; --primary-hover: darken(var(--primary-color), 10%); } .btn { background-color: var(--primary-color); } .btn:hover { background-color: var(--primary-hover); }3. 媒体查询中使用变量:root { --column-count: 1; --spacing: 10px; } media (min-width: 768px) { :root { --column-count: 2; --spacing: 20px; } } media (min-width: 1024px) { :root { --column-count: 3; --spacing: 30px; } } .grid { display: grid; grid-template-columns: repeat(var(--column-count), 1fr); gap: var(--spacing); }四、主题管理1. 深色模式:root { /* 浅色主题 */ --bg-color: #ffffff; --text-color: #333333; --primary-color: #667eea; --card-bg: #f5f5f5; } media (prefers-color-scheme: dark) { :root { /* 深色主题 */ --bg-color: #121212; --text-color: #ffffff; --primary-color: #8b5cf6; --card-bg: #1e1e1e; } } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } .card { background-color: var(--card-bg); padding: 20px; border-radius: 8px; transition: background-color 0.3s ease; }2. 主题切换:root { /* 默认主题 */ --primary-color: #667eea; --secondary-color: #764ba2; } [data-themelight] { --bg-color: #ffffff; --text-color: #333333; } [data-themedark] { --bg-color: #121212; --text-color: #ffffff; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } /* JavaScript 切换主题 */ /* document.getElementById(theme-toggle).addEventListener(click, function() { const currentTheme document.documentElement.getAttribute(data-theme); const newTheme currentTheme light ? dark : light; document.documentElement.setAttribute(data-theme, newTheme); }); */五、实战案例1. 按钮样式:root { --btn-primary: #667eea; --btn-primary-hover: #764ba2; --btn-secondary: #f5f5f5; --btn-secondary-hover: #e0e0e0; --btn-danger: #ef4444; --btn-danger-hover: #dc2626; --btn-border-radius: 6px; --btn-padding: 12px 24px; --btn-font-size: 16px; } .btn { padding: var(--btn-padding); font-size: var(--btn-font-size); border: none; border-radius: var(--btn-border-radius); cursor: pointer; transition: all 0.3s ease; font-weight: 500; } .btn-primary { background-color: var(--btn-primary); color: white; } .btn-primary:hover { background-color: var(--btn-primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .btn-secondary { background-color: var(--btn-secondary); color: #333; } .btn-secondary:hover { background-color: var(--btn-secondary-hover); transform: translateY(-2px); } .btn-danger { background-color: var(--btn-danger); color: white; } .btn-danger:hover { background-color: var(--btn-danger-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }2. 卡片样式:root { --card-bg: #ffffff; --card-border-radius: 12px; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --card-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); --card-padding: 24px; --card-margin: 20px; } .card { background-color: var(--card-bg); border-radius: var(--card-border-radius); box-shadow: var(--card-shadow); padding: var(--card-padding); margin: var(--card-margin); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: var(--card-hover-shadow); } .card-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; color: #333; } .card-text { color: #666; line-height: 1.5; margin-bottom: 16px; } .card-btn { display: inline-block; padding: 8px 16px; background-color: #667eea; color: white; border-radius: 4px; text-decoration: none; transition: background-color 0.3s ease; } .card-btn:hover { background-color: #764ba2; }3. 表单样式:root { --form-bg: #ffffff; --form-border: #ddd; --form-border-focus: #667eea; --form-border-radius: 6px; --form-padding: 12px; --form-font-size: 16px; --form-label-color: #333; --form-error-color: #ef4444; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--form-label-color); } input, textarea { width: 100%; padding: var(--form-padding); font-size: var(--form-font-size); border: 1px solid var(--form-border); border-radius: var(--form-border-radius); transition: all 0.3s ease; box-sizing: border-box; } input:focus, textarea:focus { outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .form-error { color: var(--form-error-color); font-size: 14px; margin-top: 4px; } .form-actions { display: flex; gap: 12px; margin-top: 24px; } .btn { padding: 12px 24px; border: none; border-radius: var(--form-border-radius); font-size: var(--form-font-size); cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: #667eea; color: white; } .btn-primary:hover { background-color: #764ba2; } .btn-secondary { background-color: #f5f5f5; color: #333; } .btn-secondary:hover { background-color: #e0e0e0; }六、性能优化减少变量嵌套避免过度嵌套变量定义合理使用变量只对需要重复使用的值使用变量避免复杂计算减少在变量中使用复杂的 calc() 表达式测试性能在大型项目中测试 CSS 变量的性能影响七、最佳实践命名规范使用有意义的变量名如 --primary-color 而不是 --color1组织变量将相关变量分组如颜色变量、间距变量等默认值使用 var(--variable, fallback) 提供默认值文档为复杂的变量系统添加注释文档一致性在整个项目中保持变量命名和使用的一致性八、浏览器兼容性CSS 变量在现代浏览器中得到了广泛支持包括Chrome 49Firefox 31Safari 9.1Edge 15对于旧浏览器可以使用预处理器如 Sass、Less作为备选方案。CSS 变量是现代前端开发的重要工具它能够提高代码的可维护性和灵活性让样式管理更加高效。#css #variables #custom-properties #frontend #design