Question

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

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

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

我想做的是：

在自己的DIV /卡中显示这些手机，其中各种颜色取决于手机的类型。＆＃34;电话类型＆＃34;是一个整数值。
以不同字体大小显示名称，价格，可用和数量。

我在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>

Answer 2

好的，这就是我猜你正在问什么对吗？

我希望获取样式表代码（颜色，字体大小，字体宽度）   关于我的JSON对象的一个属性的值。

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

假设您的某些HTML可以根据手机类型值的不同而发生变化，您可以在HTML中对此产生影响。

<强> HTML

extend

<强> CSS

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

您可以将mixin用于此CSS，但您不需要。上面就足够了，就像你需要它一样。你可以learn more about Mixins在这里解释它们是如何工作的。


CSS中的一些东西写起来有点乏味，特别是CSS3   以及存在的许多供应商前缀。使用mixin可以创建组   要在整个站点中重用的CSS声明。您   甚至可以通过值来使你的mixin更灵活。很好用   mixin用于供应商前缀。这是一个例子   边界半径。

作为额外的花絮，mixin就是这样的。

.phone-type-1 { color: red; } .phone-type-2 { color: green; } .phone-type-3 { color: blue; }

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

@mixin text($colour, $size) { color: $colour; font-size: $size; } .class { @include text(yellow, 14px); }

将值从HTML传递到SCSS

2 个答案: