在 class 中声明 css 变量是否有效？

Question

我没有像以前那样看到 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);
}

Answer 1

是的，这些叫做custom properties

Custom properties allow a value to be stored in one place, then referenced in multiple other places.

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

在 class 中声明 css 变量是否有效？

is it valid to declare css variable in class?

css

twitter-bootstrap

css-variables

webpack