将值从HTML传递到SCSS [英] Passing values from HTML to SCSS

问题描述

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

I am new to SCSS and not really sure how to use it. I have looked around on SO and other places to find a solution but couldn't.

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

I am developing an app that displays a list of phones. I get this list (in the form of JSON) by calling a REST API. All the phones has same type of information to be displayed, like Name, Model, Price, Available, Quantity.

请注意，我的问题与在SASS .此链接讨论计算父元素的子代数.就我而言，我想获取样式表代码(颜色，字体大小，字体宽度)，具体取决于JSON对象的属性之一的值.

Please note that my question is not similar to Access HTML attribute value in SASS. This link talks about calculating number of children of a parent element. And in my case, I want to get stylesheet code (color, font-size, font-width) depending on the value of one of the property of my JSON object.

我想做的是:

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

我已经阅读了SCSS中的 @mixin ，他们可以接受参数.我想我可以用它来传递我的电话类型整数/数字值.

I have read about @mixin in SCSS and that they can accept parameters. I guess I can use this to pass in my phone type integer/number value.

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

All the examples I have seen are calling @mixin from a another SCSS file by passing in the parameter value.

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

Is this the only way to pass in parameter value(s) to a @mixin?

如果有人能告诉我是否有办法将参数值(在我的情况下为电话类型)从 HTML 传递到 SCSS @mixin .

It would be great if somebody can please tell me if there is a way to pass parameter value (the phone type in my case) from HTML to SCSS @mixin.

我们非常感谢您的帮助.

Any help is highly appreciated.

谢谢.

推荐答案

好的，这就是我在想什么您要问的对吗?

Okay so this is what I'm guessing what you're asking right?

我想获取样式表代码(颜色，字体大小，字体宽度)，具体取决于 在我的JSON对象的属性之一的值上.

I want to get stylesheet code (color, font-size, font-width) depending on the value of one of the property of my JSON object.

这是不可能的，因为其想法是先处理SCSS文件并将其转换为静态CSS文件，然后再将其加载到页面上.因此，记住这一点，您可以做的就是这个.

This isn't possible because the idea is that the SCSS file is processed and turned into a static CSS file which is then loaded onto the page. So with that in mind, what you can do instead is this.

假设您有一些可以根据电话类型值进行更改的HTML，那么您可能会在HTML中产生一些影响.

Assuming you have some HTML that can change depending on what the phone type value is, you could have something to effect of this in your 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

CSS

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

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

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

您可以为此CSS使用mixin，但不需要.上面的内容就可以满足您的需要.您可以在此处详细了解Mixins ，尽管它解释了它们的工作原理.

You could use a mixin for this CSS, but you don't need to. The above would suffice just as you'd need it. You can learn more about Mixins here though which explains how they work.

CSS中的某些内容编写起来有些繁琐，尤其是在CSS3中 以及存在的许多供应商前缀. mixin让您分组 您要在整个网站中重复使用的CSS声明.你 甚至可以传递值来使您的混合更灵活.很好用 mixin用于供应商前缀.这是一个例子 边界半径.

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius.

作为附加花絮，mixin的工作原理如下.

As an additional tidbit, a mixin works like so.

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

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

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

Of course, when compiled into a CSS file, all we get is this.

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

这篇关于将值从HTML传递到SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！