CSS变量详解与应用

CSS变量详解与应用什么是CSS变量CSS变量也称为自定义属性是CSS3引入的一种机制允许我们定义可重用的值这些值可以在整个样式表中使用。CSS变量为我们提供了一种更灵活、更可维护的方式来管理样式。基本语法定义变量CSS变量以--开头后跟变量名。/* 在根元素中定义全局变量 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; --spacing: 10px; } /* 在特定元素中定义局部变量 */ .container { --container-width: 1200px; --container-padding: 20px; }使用变量使用var()函数来引用变量。/* 使用全局变量 */ .button { background-color: var(--primary-color); font-size: var(--font-size); padding: var(--spacing); } /* 使用局部变量 */ .container { width: var(--container-width); padding: var(--container-padding); margin: 0 auto; }变量的继承CSS变量会从父元素继承。:root { --color: red; } .parent { --color: blue; } .child { color: var(--color); /* 会继承父元素的--color值即blue */ }变量的默认值var()函数可以接受第二个参数作为默认值当变量未定义时使用。.element { color: var(--undefined-color, black); /* 如果--undefined-color未定义使用black */ }变量的作用域全局作用域在:root伪类中定义的变量具有全局作用域可以在整个文档中使用。:root { --global-color: red; } /* 可以在任何地方使用 */ .element { color: var(--global-color); }局部作用域在特定元素中定义的变量只在该元素及其子元素中有效。.local { --local-color: blue; color: var(--local-color); /* 有效 */ } /* 无效因为--local-color只在.local元素中定义 */ .other { color: var(--local-color); }变量的类型CSS变量可以存储各种类型的值包括颜色值--color: #3498db;长度值--width: 100px;字体值--font: Arial, sans-serif;数值--opacity: 0.5;字符串--prefix: Hello ;变量的高级用法1. 变量的计算可以使用calc()函数对变量进行计算。:root { --base-font-size: 16px; --spacing: 10px; } .element { font-size: calc(var(--base-font-size) * 1.5); /* 24px */ margin: calc(var(--spacing) * 2); /* 20px */ }2. 变量的响应式调整可以在媒体查询中修改变量的值。:root { --font-size: 16px; --container-width: 1200px; } media (max-width: 768px) { :root { --font-size: 14px; --container-width: 90%; } } .container { width: var(--container-width); font-size: var(--font-size); }3. 主题切换使用CSS变量实现主题切换。/* 默认主题 */ :root { --primary-color: #3498db; --background-color: #ffffff; --text-color: #333333; } /* 暗色主题 */ body.dark-theme { --primary-color: #9b59b6; --background-color: #2c3e50; --text-color: #ecf0f1; } /* 使用变量 */ body { background-color: var(--background-color); color: var(--text-color); } .button { background-color: var(--primary-color); color: white; }4. 动画和过渡可以在动画和过渡中使用CSS变量。:root { --animation-duration: 1s; --animation-delay: 0.5s; } .element { transition: all var(--animation-duration) ease var(--animation-delay); } .element:hover { transform: scale(1.1); } keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { animation: pulse var(--animation-duration) ease-in-out infinite; }变量的实际应用1. 统一管理颜色:root { /* 主色调 */ --primary: #3498db; --primary-light: #5dade2; --primary-dark: #2980b9; /* 辅助色 */ --secondary: #2ecc71; --secondary-light: #58d68d; --secondary-dark: #27ae60; /* 中性色 */ --white: #ffffff; --gray-light: #f5f5f5; --gray: #95a5a6; --gray-dark: #34495e; --black: #000000; } /* 使用颜色变量 */ .button-primary { background-color: var(--primary); color: var(--white); } .button-primary:hover { background-color: var(--primary-dark); } .card { background-color: var(--white); border: 1px solid var(--gray-light); color: var(--gray-dark); }2. 统一管理间距:root { --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; } /* 使用间距变量 */ .container { padding: var(--spacing-md); margin-bottom: var(--spacing-lg); } .card { padding: var(--spacing-md); margin-bottom: var(--spacing-md); } .button { padding: var(--spacing-sm) var(--spacing-md); margin-right: var(--spacing-sm); }3. 统一管理字体:root { --font-family: Roboto, sans-serif; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 24px; --font-size-xxl: 32px; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; } /* 使用字体变量 */ body { font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-normal); } h1 { font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } .caption { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); }4. 组件样式管理:root { /* 按钮样式 */ --button-padding: 10px 20px; --button-border-radius: 4px; --button-font-size: 16px; --button-font-weight: 500; /* 卡片样式 */ --card-padding: 20px; --card-border-radius: 8px; --card-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /*