为了避免全局css变量的重复,可以将应用程序中的全局css变量存储在一个单独的文件中,并将该文件引入每个组件的样式表中。以下是示例代码:
_variables.scss
的文件,其中包含全局css变量。// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
_variables.scss
文件。// app.component.scss
@import 'variables';
h1 {
color: $primary-color;
}
// another.component.scss
@import 'variables';
p {
color: $secondary-color;
}
这样,每次需要更改变量值时,只需更改_variables.scss
文件即可。这种方法可以避免全局css变量的重复,并且使应用程序更加易于维护。