如何使用CSS变量简化样式管理？

CSS变量（也称为自定义属性）是一种强大的功能，可以让你在整个文档中重用相同的值，并通过中央位置管理这些值，从而简化样式表的管理。使用CSS变量可以使主题定制、响应式设计和组件样式的维护变得更加简单和灵活。

1. 定义CSS变量
你可以在任何选择器中定义CSS变量，但通常它们会在根选择器:root中定义，这使得它们在整个文档中都可以访问。

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
    --padding-large: 16px;
    --padding-small: 8px;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--primary-color);
    color: white;
}

button {
    background-color: var(--secondary-color);
    padding: var(--padding-small);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}

.container {
    padding: var(--padding-large);
}

2. 使用CSS变量
你可以通过var()函数来使用已定义的变量。如果你想为变量设置一个备用值，以防未定义该变量，也可以在var()函数中添加第二个参数。

.button {
    background-color: var(--secondary-color, blue); /* 如果--secondary-color未定义，则使用blue */
}

3. 在JavaScript中使用CSS变量
CSS变量不仅可以在CSS中使用，还可以在JavaScript中动态读取和修改。这对于响应用户交互或实现主题功能非常有用。

// 获取根元素
const root = document.documentElement;

// 读取变量
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color').trim();

// 设置变量
root.style.setProperty('--primary-color', '#555');

4. 实现主题切换
CSS变量非常适合实现颜色主题或样式主题的动态切换。你可以通过简单地更改几个变量的值来更改整个页面的外观。

<button onclick="changeTheme()">Change Theme</button>
javascript
Copy code
function changeTheme() {
    root.style.setProperty('--primary-color', 'black');
    root.style.setProperty('--secondary-color', 'grey');
    root.style.setProperty('--padding-large', '12px');
}

5. 响应式设计
CSS变量也可以与媒体查询一起使用，以响应不同的屏幕尺寸：

:root {
    --responsive-padding: 8px;
}

@media (min-width: 600px) {
    :root {
        --responsive-padding: 16px;
    }
}

.container {
    padding: var(--responsive-padding);
}

通过上述方法，CSS变量不仅简化了样式的管理，还增强了样式的可维护性和可扩展性。你可以轻松调整样式的各个方面，而不必在多个地方手动更新值。