html - 将值从 HTML 传递到 SCSS

Question

我是 SCSS 的新手，不太确定如何使用它。我在 SO 和其他地方四处寻找解决方案，但没有找到。

我正在开发一个显示电话列表的应用程序。我通过调用 REST API 获得此列表(以 JSON 的形式)。所有手机都显示相同类型的信息，如名称、型号、价格、可用、数量。

请注意，我的问题与 Access HTML attribute value in SASS 不同。此链接讨论计算父元素的子元素数。在我的例子中，我想根据我的 JSON 对象的属性之一的值获取样式表代码(颜色、字体大小、字体宽度)。

我想做的是:

• 在自己的 DIV/Card 中显示这些手机，并使用不同的颜色取决于手机的类型。 “电话类型”是一个整数值。
• 以不同的字体大小显示名称、价格、库存和数量。

我读过关于 SCSS 中的 @mixin 并且他们可以接受参数。我想我可以用它来传递我的电话类型整数/数字值。

我看到的所有示例都是通过传入参数值从另一个 SCSS 文件调用 @mixin。

这是将参数值传递给 @mixin 的唯一方法吗？

如果有人能告诉我是否有办法将参数值(在我的例子中是电话类型)从HTML传递到，那就太好了SCSS @mixin.

非常感谢任何帮助。

谢谢。

Answer 1

您可以使用 css custom properties (variables) 将值从 HTML 传递到 CSS 类

这是工作示例:

.fill-color {
  display: block;
  height: 40px;
  width: 40px;
  color: var(--color);
}

<div class="fill-color" style="--color: blue;">Test</div>
<div class="fill-color" style="--color: green;">Test</div>
<div class="fill-color" style="--color: red;">Test</div>