角材料-全局颜色变量 [英] Angular Material - Global color variables

问题描述

他们参考Angular Material文档，建议每个组件使用一个-theme文件来管理将与主题相关的样式应用于特定类.

Looking at the Angular Material documentation, they recommend using a -theme file per component to manage applying any theme-related styles to a specific class.

从我的角度来看，这种方法的一些缺点是:

From my perspective, some downsides to this approach are:

• 非常详细
• 将样式分为两个不同的位置
• 您的所有前端开发人员都需要了解Angular Material颜色的工作原理
• 使得更改值变得更加困难(例如，我们可能一直将mat-color($primary, 200)用于边框颜色，现在想将其更改为mat-color($primary, 300).在整个代码库中都会重复进行此操作.

• quite verbose
• splits up the style into two different locations
• all your frontend devs need to understand how Angular Material colours work
• makes it harder to change values (e.g. we might've been using mat-color($primary, 200) for border colours and now want to change it to mat-color($primary, 300). This will have been repeated all throughout the codebase.

使用一致的设计语言，将只使用一部分颜色(例如，主调色板中的4种颜色，主色调调色板中的3种颜色，一些不同的前景色/背景色等).

Given a consistent design language, there will only be a subset of colors that will be used (e.g. 4 colors from the primary palette, 3 from the accent palette, a few different foreground / background colors, etc).

鉴于上述情况，让_colors.scss使用主题定义确切的颜色不是更有意义，而不是希望开发人员每次都从主题中提取正确的值吗?

Given the above, doesn't it make more sense to have a _colors.scss that defines the exact colors using the theme rather than hoping developers extract the correct value from the theme each time?

例如也许像这样:

  $clr-primary-default: mat-color($primary);
  $clr-primary-contrast: mat-color($primary, default-contrast);
  $clr-primary-light: mat-color($primary, lighter);
  $clr-primary-dark: mat-color($primary, darker);

  $clr-accent-default: mat-color($accent);
  $clr-accent-light: mat-color($accent, lighter);
  $clr-accent-dark: mat-color($accent, darker);

  $clr-default-text: mat-color($foreground);
  $clr-secondary-text: mat-color($foreground, secondary-text);

  //etc

然后，我不需要为需要特定颜色的每个组件创建单独的-theme文件，而是可以简单地导入colors.scss文件并直接在*.component.scss文件中使用变量.

Then rather than creating a separate -theme file for each component that requires specific colors, I can simply import the colors.scss file and use the variables directly in the *.component.scss file.

只是想验证上面的内容是否正确，并且我没有错过任何明显会在赛道上引起痛苦的东西?

Just wanting to validate that the above is sound and that I'm not missing anything obvious that's going to cause pain down the track?

另一个棘手的部分是如何有效地在单独的colors文件中定义它们，因为该文件需要访问主题数据.

The other tricky part is how to actually define these in a separate colors file efficiently given the file will need access to the theme data.

推荐答案

为什么使用@mixin?

只是想验证上述内容是否正确，并且我没有错过任何明显会导致痛苦的东西?

Just wanting to validate that the above is sound and that I'm not missing anything obvious that's going to cause pain down the track?

我能想到的唯一一件事是，您将错过在一个应用程序中使用多个主题的机会.通过角度材料文档，每个组件都有一个@mixin，可以使用不同的$theme变量多次@include.

The only thing, I can think of, is that you would miss the opportunity to use multiple themes in one application. With the approach from the Angular Material documentation, you would have a @mixin for each component, that you can @include multiple times with different $theme variables.

来自 https://medium.com的示例/@ tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 :

.default-theme {
  @include angular-material-theme($theme);
  @include custom-component-theme($theme);
}

.light-theme {
  @include angular-material-theme($light-theme);
  @include custom-component-theme($light-theme);
}

如果您将颜色作为scss变量导入到组件中并在其中使用，则此方法将无效.

This wouldn't work, if you import colors as scss-variables into your components and use it there.

另一个棘手的部分是如何有效地在单独的颜色文件中定义它们，因为该文件需要访问主题数据.

The other tricky part is how to actually define these in a separate colors file efficiently given the file will need access to the theme data.

这实际上非常简单:我有一个单独的文件src/styles/_variables.scss，其中包含我的自定义颜色，如scss-variables和也 $theme变量，我稍后将在.

This is actually pretty straight forward: I have a separate file src/styles/_variables.scss that contains my custom colors as scss-variables and also the $theme variable, that I am using later in src/theme.scss.

@import '~@angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-blue, 800, 500, 900);
$accent:  mat-palette($mat-blue, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme($primary, $accent, $warn);

// Custom colors
$custom-colors: (
  custom-color-a: mat-color($mat-green, 700),
  custom-color-b: mat-color($mat-red, 400),
);
$theme: map-merge($theme, (custom-colors: $custom-colors));

要将我的_variables.scss导入组件内，我必须

To import my _variables.scss inside a component, I have to add stylePreprocessorOptions to the angular.json file:

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

现在，我可以将变量导入组件的所有scss文件中了

Now I can import my variables in all scss-files of my components:

@import 'variables';

.custom-class-a {
  background-color: map-get($custom-colors, custom-color-a);
  color: map-get($custom-colors, custom-color-b);
}

为什么我要使用萨斯地图和map-merge?

您注意到，我在sass-map $custom-colors中收集了我的自定义颜色，并将它们合并到我的$theme变量中.这样，我可以通过将自定义颜色直接导入到我的组件样式表中来使用自定义颜色(如上所述)，或者可以在Angular Material中描述它们的方式在我的组件@mixin中使用它们.文档.

Why do I use a sass-map and map-merge?

As you noticed, I collect my custom colors in the sass-map $custom-colors and merge them into my $theme variable. This way I could either use my custom colors by directly importing it into my components style sheet (as described above) or I could use them inside my components @mixin the way it is described in the Angular Material documentation.

@import '~@angular/material/theming';

@mixin custom-component-theme($theme) {
  $custom-colors: map-get($theme, custom-colors);

  .custom-class-a {
    background-color: map-get($custom-colors, custom-color-a);
    color: map-get($custom-colors, custom-color-b);
  }
}

也许这种组合是您的前端开发人员可以使用的一种方式?

Maybe this combination is a way that your frontend devs could work with?

这篇关于角材料-全局颜色变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！