使用 css 变量的正确方法

Question

我需要使用 css 个变量：

:root {
   --main-bg-color: brown;
}
@mixin themeChanges-background {
    background-color: var(--main-bg-color);
}
.classOne {
    ul {
        @include themeChanges-background();        
    }
}

显示为

ul{ background-color: var(--main-bg-color);}

似乎无法弄清楚我哪里出错了，因为它没有给我正确的值。预期是：

ul {background-color: brown;}

Answer 1

我认为您正在混合（没有双关语意）CSS 与 SASS/SCSS 或其他 CSS 预处理器。

@mixin 由 CSS 预处理器使用，而不是本机 CSS。在那种情况下，您可以按照自己的方式声明 mixins，并且变量如下：

$main-bg-color: brown;

@mixin themeChanges-background {
  background-color: $main-bg-color;
}

.classOne {
  ul {
    @include themeChanges-background;
  }
}

在本机 CSS 中，mixins 就像您的其他变量一样完成：

:root {
  --main-bg-color: brown;
  --themeChanges-background: {
    background-color: var(--main-bg-color);
  }
}
.classOne {
  ul {
      @apply --themeChanges-background;        
  }
}

只有一个小问题，@apply 是一项实验性功能，isn't supported by any browsers out of the box。如果您确实需要，可以使用 "Experimental web platform features" 功能标志在 Chrome 中启用它。我建议坚持使用 SASS 或 SCSS，但如果您想让其他人看到您的样式。

使用 css 变量的正确方法

Using css variables correct way

css

mixins

css-variables