将值从 HTML 传递到 SCSS

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

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

请注意，我的问题与在 SASS 中访问 HTML 属性值。此链接讨论计算父元素的子元素数量。就我而言，我想根据 JSON 对象的属性之一的值获取样式表代码（颜色、字体大小、字体宽度）。

我想做的是：

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

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

我见过的所有例子都在调用@mixin通过传入参数值从另一个 SCSS 文件中获取。

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

如果有人能告诉我是否有办法传递参数值（电话类型就我而言）来自HTML to SCSS @mixin.

非常感谢任何帮助。

谢谢。

您可以使用以下方法将值从 HTML 传递到 CSS 类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>