将值从HTML传递到SCSS

Question

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

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

请注意，我的问题与SASS中的Access HTML属性值不同。此链接讨论计算父元素的子代数。在我的情况下，我想获取样式表代码（颜色，字体大小，字体宽度），具体取决于JSON对象的属性之一的值。

我正在尝试做的是：

• 根据电话的类型，以自己的DIV /卡显示这些电话，并用各自的颜色显示。“电话类型”是整数值。
• 以不同的字体大小显示名称，价格，可用量和数量。

我已经在SCSS中阅读了有关@mixin的内容，并且他们可以接受参数。我想我可以用它来传递我的电话类型的整数/数字值。

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

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

如果有人可以告诉我是否有办法将参数值（在我的情况下为电话类型）从HTML传递给SCSS @mixin，那将是很好的。

非常感谢您的帮助。

谢谢。

Answer 1

您可以使用CSS自定义属性（变量）将值从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，但您不需要。以上就足够了，就像你需要的那样。您可以在此处了解有关 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;
}