将值从 HTML 传递到 SCSS

Question

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

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

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

我想做的是：

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

我已阅读 SCSS 中的 @mixin 并且他们可以接受 参数。我想我可以使用它来传递我的手机类型整数/数字值。

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

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

如果有人能告诉我是否有办法将参数值（在我的情况下为 phone 类型）从 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>

Answer 2

好吧，这就是我猜你在问什么对吧？

我想获取样式表代码（颜色、字体大小、字体宽度），具体取决于 我的 JSON 对象的一个​​属性的值。

这是不可能的，因为我们的想法是处理 SCSS 文件并将其转换为静态 CSS 文件，然后将其加载到页面上。所以考虑到这一点，你可以做的就是这个。

假设您有一些 HTML 可以根据电话类型的值进行更改，您可以在 HTML 中对此产生影响。

HTML

<div class="phone-type-1">
    12345
</div>

<div class="phone-type-2">
    12345
</div>

<div class="phone-type-3">
    12345
</div>

CSS

.phone-type-1 {
    color: red;
}

.phone-type-2 {
    color: green;
}

.phone-type-3 {
    color: blue;
}

您可以为此 CSS 使用 mixin，但您不需要这样做。以上就足够了，就像你需要它一样。你可以在这里learn more about Mixins 解释它们的工作原理。

CSS 中有些东西写起来有点乏味，尤其是 CSS3 以及存在的许多供应商前缀。一个 mixin 可以让你创建组 您希望在整个站点中重用的 CSS 声明。你 甚至可以传入值以使您的 mixin 更加灵活。好用 mixin 用于供应商前缀。这是一个示例 边界半径。

作为一个额外的花絮，mixin 的工作原理是这样的。

@mixin text($colour, $size) {
    color: $colour;
    font-size: $size;
}

.class {
    @include text(yellow, 14px);
}

当然，当编译成 CSS 文件时，我们得到的只是这个。

.class {
    color: yellow;
    font-size: 14px;
}