：根变量在：元素之前不可用

Question

我将很多 CSS 变量分配给 :root 但这些变量在我的 :before 元素中无法访问。我在网上找不到任何相关内容。

检查 :before 元素的父级时，我在谷歌开发工具的样式面板底部看到所有 :root 变量。请参阅下面的屏幕截图。

我的CSS

    &__meta {
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--text-color);

    &-author {
        margin-right: 15px;
    }
    &-primary-cat:before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: var(--text-color);
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
    }
}

Chrome 开发工具父级 CSS

Chrome 开发工具 :before CSS - 除背景颜色之外的所有样式均按预期应用于 :before 元素

Answer 1

类似问题的答案可能会有所帮助：CSS 变量在对话框中不起作用::backdrop

伪元素不继承 :root 的变量。听起来您需要将它们添加到定义它们的列表中，例如

:root,
::after,
::before {
    /* Your variables*/
} 

Answer 2

为选择器和每个伪定义 CSS Var/自定义属性

目前看来 css 变量或自定义属性不会从元素或父元素选择器继承到其伪元素，也不会继承到任何子元素或其伪元素。

据我所知，不幸的是，您必须定义它们两次，包括在父元素选择器上定义一次 css var/custom 属性，然后为每个伪选择器再次定义它们。绝对可能有最佳实践，但我找不到，所以这个设置适合我。

我将我的 css vars/自定义属性添加到特定选择器，以便可以根据元素选择器进一步修改它们，并且检查每个元素并让您的 css vars/自定义属性与您的选择器一起显示会稍微容易一些。

基本 CSS 方法 1 示例

// .example element and its pseudo selectors
.example, .example:before, .example:after, .example:hover, .example:active, .example:focus, .example:before, 
// Now any children of .example and their pseudo selectors
.example *:after, .example *:hover, .example *:active, .example *:focus {
  --example-color: #fff;
}

使用 sass/scss 这样的预处理器有很大帮助。我对这项技术的使用太长，无法全部展示，但这是我的做法的一个过于简化的示例。

高级 SCSS 方法 1 示例

// Make a mixin so its easy to repeat
// your css vars/ custom properties
@mixin css-vars($var){
   --var-bg: #{$var};
}

// Defined before using @include
$var: #fff;

.example {

  &,// available to .example
  &::before,
  &::after {
    @include css-vars($var);
    background: var(--var-bg);
  }
}

哪个会输出：

.example, .example::before, .example::after {
  --var-bg: #fff;
  background: var(--var-bg);
}

稳健 SCSS 方法 2 示例

另一种方法是嵌套一个 mixin，该 mixin 生成 css 变量/自定义属性，并使用此 mixin 的参数来更改值、前缀和可能的中缀到另一个 mixin 中，其中此 mixin 包含在元素选择器中，然后定义 scss mixin 变量数据它被传递到生成器 mixin。 （这很有用，因此您可以轻松地在其他复杂的 css 变量/其他元素上的自定义属性上重用此生成器混合 - 更容易。）

@mixin css-vars-generator(
  $example-prefix,
  $example-infix,
  $example-color
) {
    // Some cool things could happen here,
    // @each loops, color adjustment functions, etc...
    // Only showing some saucy way to customize the actual css var / custom property name
 --#{$example-prefix}-#{$example-infix}-color: #{$example-color};
}

@mixin css-vars(
  $example-color
) {

  // CSS Variables / Custom Properties not inherited or available on pseudo elements from parent elements or :root
  // Must include in them in any pseudo you want to use them
  &,
  & *:before,
  & *:after,
  & *:hover,
  & *:active,
  & *:focus {
    @include css-vars-generator(
      "example-A",
      "var-B",
      $example-color
    );
  }
  // 
}
$example-color:#fff;
.example {
    @include css-vars($example-color);
}

这会输出：

.example, .example*:before, .example*:after, .example*:hover, .example*:active, .example*:focus {
  --example-A-var-B-color: #fff;
}