在类中声明css变量是否有效？ [复制]答案

【问题标题】：is it valid to declare css variable in class? [duplicate]在类中声明css变量是否有效？ [复制]
【发布时间】：2021-05-18 03:56:03
【问题描述】：

我没有像以前那样看到 css 变量声明（语法），

通常我使用 css 变量，例如使用 :root{}.. 下面的代码是不同的......

运行 webpack 后，我在 css 代码下面找到...

它是有效的语法吗？我正在使用 vs 代码编辑器，编辑器也没有显示任何错误..

或者也许我在其他地方错了，请发表评论..

Bootstrap Sass 已导入

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";

输出 CSS 语法

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

【问题讨论】：

是的，它是有效的..
来自重复的自定义属性是普通属性，所以可以在任意元素上声明，用普通继承和级联规则解决

标签： css twitter-bootstrap webpack css-variables

【解决方案1】：

是的，这些被称为custom properties

自定义属性允许将值存储在一个地方，然后在多个其他地方引用。

注意--bs-gutter-x 在第 7 行和第 8 行中是如何重用的。优点是您现在只需在一处（第 2 行）更改值。

【讨论】：