CODEWITHSUNDEEP
htmlcsssass
Gauzy
Gauzy

Reputation: 771

Passing values from HTML to SCSS

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.

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.

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.

What I am trying to do is:

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.

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

Is this the only way to pass in parameter value(s) to a @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.

Thank you.

Upvotes: 12

Views: 40144

Answers (2)

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

You can pass value from HTML to CSS class using css custom properties (variables)

Here is working example :

.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>

Upvotes: 49

user7236046
user7236046

Reputation:

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

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

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.

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

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

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.

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.

As an additional tidbit, a mixin works like so.

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

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

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

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

Upvotes: 6

Related Questions