时间戳

首页 > 解决方案 > 在类中声明css变量是否有效？

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

问题描述

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

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

运行 webpack 后，我发现下面的 css 代码...

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

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

导入的引导 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);
}

在此处输入图像描述

标签： csstwitter-bootstrapwebpackcss-variables

解决方案

是的，这些被称为自定义属性

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

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

推荐阅读