在日常开发中，我们经常遇到如下 CSS 代码：
bg-primary {background-color: var(--primary-color);
}
disabled-foreground {color: var(--disabled-foreground-color);
}
这些变量通常来自于CSS变量（也称为CSS自定义属性），通常定义在CSS文件或CSS-in-JS库中，用于全局管理样式。
下面解释这些变量的来源和使用方式：
1. CSS变量的定义
CSS变量可以在CSS文件中定义，并且通常会在:root 选择器中定义，以便在整个应用程序中全局使用。例如：
:root {--primary-color: #007bff;--primary-foreground-color: #ffffff;--destructive-color: #dc3545;--destructive-foreground-color: #ffffff;--input-border-color: #ced4da;--background-color: #f8f9fa;--accent-color: #17a2b8;--accent-foreground-color: #ffffff;--secondary-color: #6c757d;--secondary-foreground-color: #ffffff;--disabled-color: #e9ecef;--disabled-foreground-color: #6c757d;
}
在这个例子中，--primary-color等变量被定义在:root选择器中，使得它们在整个CSS文件中都可以被引用和使用。
2. 在CSS中使用变量
一旦定义了这些变量，可以在CSS规则中通过var()函数引用它们。例如：
.button {background-color: var(--primary-color);color: var(--primary-foreground-color);
}.button-destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);
}.button-outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);
}.button-accent {background-color: var(--accent-color);color: var(--accent-foreground-color);
}
3. 在CSS-in-JS中使用变量
如果你使用的是CSS-in-JS库，如Styled Components或Emotion，你也可以在JavaScript/TypeScript中定义和使用这些变量。例如，在Styled Components中：
import styled from 'styled-components';const Button = styled.button`background-color: var(--primary-color);color: var(--primary-foreground-color);&.destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);}&.outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);}
`;
4. 在React项目中管理CSS变量
在React项目中，你可以将这些变量放在全局CSS文件中，通常是src/index.css或src/App.css。你也可以通过CSS-in-JS库直接在组件中定义和使用这些变量。
5. 项目中实际应用的例子
在实际项目中，CSS变量的定义和使用通常会在项目的主样式文件中进行。例如：
/* src/index.css */
:root {--primary-color: #007bff;--primary-foreground-color: #ffffff;--destructive-color: #dc3545;--destructive-foreground-color: #ffffff;--input-border-color: #ced4da;--background-color: #f8f9fa;--accent-color: #17a2b8;--accent-foreground-color: #ffffff;--secondary-color: #6c757d;--secondary-foreground-color: #ffffff;--disabled-color: #e9ecef;--disabled-foreground-color: #6c757d;
}/* src/components/Button.css */
.button {background-color: var(--primary-color);color: var(--primary-foreground-color);
}.button-destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);
}.button-outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);
}
总结
--primary-color等CSS变量通过全局CSS定义和管理，提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义，并在整个应用程序中引用和使用。