css 中使用变量_patternfly元素使用组件中的css变量主题挂钩

css 中使用变量

PatternFly Element components have a standard way of stacking variables and fallback values to provide default colors, but additionally we include “theming hooks”, or places for developers who are using these components to change colors, spacing, typography and more.

PatternFly Element组件具有堆叠变量和后备值以提供默认颜色的标准方法，但此外，我们还包括“主题挂钩”，即供使用这些组件更改颜色，间距，版式等的开发人员使用的位置。

For example, here’s a CSS property within a the pfe-cta web component. The browser will look for these CSS variables in the order they are defined. If a variable is empty, it will ignore it and move onto the next one.

例如，这是pfe-cta Web组件内CSS属性。 浏览器将按照定义的顺序查找这些CSS变量。 如果一个变量为空，它将忽略它并移至下一个。

So the browser will look for these things, in this order:

因此，浏览器将按以下顺序查找这些东西：

1. A component-specific local variable, empty by default.
   特定于组件的局部变量，默认为空。

2. A theme variable, which impacts most components, empty by default.

   主题变量 ，它会影响大多数组件，默认情况下为空。

3. A fallback value, in case both variables are empty. This is the default.
   如果两个变量均为空，则为备用值。 这是默认值。

空局部变量 (Empty local variables)

Leaving local variables empty means there is less specificity needed to override them. For example, in order to override the active tab highlight color within the pfe-tabs component, you’d only need to set a new value of a variable at the :root level instead of having to specify a CSS selector. This is desirable because using a CSS selector requires knowledge of which HTML tag or class to use, and it can create specificity battles.

将局部变量保留为空意味着覆盖它们所需的特异性较低。 例如，要覆盖pfe-tabs组件中的活动选项卡突出显示颜色，您只需在:root级别设置变量的新值，而不必指定CSS选择器。 这是可取的，因为使用CSS选择器需要知道要使用哪个HTML标记或类，并且它可能会引起特异性争斗。

// This
:root {
       
  --pfe-tabs--BorderColor: purple;
}// Not this
pfe-tab {
       
  --pfe-tabs--BorderColor: purple;
}

When building web components, remember that CSS variables have a performance impact, so we should err on the side of only including them when necessary. If a local variable is not needed, your CSS can be simplified to use a theme variable only, then a fallback:

构建Web组件时，请记住CSS变量会影响性能 ，因此我们应该只在必要时才包括它们。 如果不需要局部变量，则可以将CSS简化为仅使用主题变量，然后回退：

font-size: var(--pf-global--font-size, 16px));
                    ^ theme variable    ^ fallback value

Or if a component has unique spacing between two items, for example the 3px between the call-to-action text and the arrow, then a theme variable is not necessary. In this case, you could include a local variable only, should you want that to be a hook for overrides.

或者，如果组件在两个项目之间具有唯一的间距，例如，号召性用语和箭头之间的3px，则不需要主题变量。 在这种情况下，您只应包含一个局部变量，如果您希望它成为替代的钩子。

margin: var(--pf-cta--Margin, 3px); ^ local variable  ^ fallback value

Or go basic, and simply code the spacer without any variables, if it’s not needed.

或转为基础，如果不需要，只需编写没有任何变量的间隔即可。

margin: 3px; ^ value only

很棒的功能 (Awesome Functions)

You might think this sounds like a lot of extra work when building the component, but fortunately we have some helpful functions to do the heavy lifting for us.

您可能会认为，在构建组件时，这听起来像是很多额外的工作，但是幸运的是，我们有一些有用的功能可以为我们完成繁重的工作。

Watch a demo video of how to use the pfe-local and the pfe-var functions to easily build the variables stack!

观看 有关如何使用 pfe-local 和