将HTML中的值传递给SCSS

Question

我对SCSS不太熟悉，不知道如何使用它。我在Stack Overflow和其他地方寻找解决方案，但没有找到。

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

请注意，我的问题与访问SASS中HTML属性值不同。该链接涉及计算父元素的子元素数目。而在我的情况下，我想根据JSON对象的某个属性值获取样式表代码（颜色、字体大小、字体宽度）。

我想要做的是：

• 使用不同的颜色根据手机类型将这些手机显示在自己的DIV/Card中。"Phone Type"是一个整数值。
• 以不同的字体大小显示名称、价格、可用性和数量。

我已经了解了SCSS中的@mixin，它们可以接受参数。我想我可以使用这个来传递我的手机类型整数/数字值。

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

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

如果有人能告诉我如何从HTML传递参数值（在我的情况下是手机类型）到SCSS的@mixin，那就太好了。

非常感谢您的帮助。

- Gauzy

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>

- Noopur Dabhi

---

真的很令人印象深刻。但我们能为其他风格做吗？ - Hidayt Rahman

是的，'--color' 只是一个变量，你可以按照自己的方式命名它，并且你可以设置任何样式属性。 - Noopur Dabhi

父元素怎么办？如果我想在其他地方的元素上设置颜色，我们该怎么做？ - Hidayt Rahman

你有任何 JSFiddle 链接可以解释示例吗？ - Noopur Dabhi

令人印象深刻，但在我们最喜欢的浏览器IE11中无法运行。 - Phil

那么...IE是什么？ - Antoine Rucquoy

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;
}

你可以使用mixin来处理这个CSS，但其实并不需要。上面的代码已经足够了。你可以在这里了解更多关于Mixin的内容，它会解释Mixin的工作原理。

有些CSS的编写方式比较繁琐，特别是在使用CSS3和众多的厂商前缀时。Mixin允许你创建一组CSS声明，以便在整个站点中重复使用。你甚至可以传入值，使mixin更加灵活。一个很好的mixin用法是用于厂商前缀。下面是一个border-radius的示例。

另外，mixin的工作方式如下。

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

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

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

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

- user7236046

---

谢谢Daniel James的详细回复，非常感谢。我的意图是创建一个可重用代码块（而不是尽可能多的CSS类，以适应各种手机类型：）使用SCSS和**@mixin，我只需传递一个参数并使用'@if else'来获得所需的结果。我想我还没有完全理解SCSS。我还在某个地方读到可以使用'attr（）'函数与before**一起使用，并将HTML元素中的属性传递给要处理的元素。您对这种方法有什么看法？再次感谢您的帮助，非常感谢！ - Gauzy

不用担心。在这里查看如何在Sass中使用if语句的答案（https://dev59.com/q2ct5IYBdhLWcg3wCJB-#12410079）。您可以在CSS中使用HTML属性，但是CSS将是静态的、不变的输出，因此您可以基于属性进行样式设置（https://developer.mozilla.org/en/docs/Web/CSS/attr），但仍需要编写所有CSS规则。 - user7236046