英文:
Using SCSS variables and themes in Angular
问题
以下是您要翻译的内容：
在Angular项目中实现主题和SCSS变量的最佳实践是什么？
例如，我不想在我的应用程序中到处写“color: blue”。我更愿意写“color: $primary”，并在全局样式表中有一个名为$primary的变量，我可以将其设置为蓝色。
// 全局变量
$primary: #00204a;
$secondary: #00bbf0;
$accent: #fdb44b;
$warn: red;
$success: green;
只是将这些变量放在styles.scss中并不能使它们在我的组件样式表中可访问。我需要导入任何东西吗？
在Angular中应该使用哪种方法来处理主题？关于主题的所有信息似乎都是关于Angular Material的，我们不是希望为整个站点创建一个主题，而不仅仅是Angular Material组件吗？
英文:
What's the best practice for implementing themes and SCSS variables in an Angular project?
For example, I don't want to have to write 'color: blue' everywhere in my app. I'd rather write 'color: $primary' and have a variable in the global styles sheet called $primary that I can set to blue.
// Global Variables
$primary: #00204a;
$secondary: #00bbf0;
$accent: #fdb44b;
$warn: red;
$success: green;
Just putting those variables there in styles.scss doesn't make them accessible in my component's style sheets. Do I have to import anything?
What approach should I use for themes in Angular? Everything I am reading regarding themes seems to be for Angular Material, wouldn't we want to create a theme for the whole site and not just Angular Material components?
答案1
得分: 1
在你的 styles.scss 中添加 :root：
:root {
--primary: #00204a;
--secondary: #00bbf0;
--accent: #fdb44b;
--warn: red;
--success: green;
}
然后你可以在你的应用的任何地方使用这些变量：
.button {
background-color: var(--primary);
}
英文:
Put :root in your styles.scss:
:root {
--primary: #00204a;
--secondary: #00bbf0;
--accent: #fdb44b;
--warn: red;
--success: green;
}
Then it will be possible to use these variables anywhere in your app:
.button {
background-color: var(--primary);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论