Passing values from HTML to SCSS

Question

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:

Display these phones in their own DIV/Card with individual colors depending on the type of the phone. The "Phone Type" is an integer value.
Display Name, Price, Available and Quantity in different font sizes.

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.

score 45 · Answer 1 · answered Dec 14 '18 at 12:15

45

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>

answered Dec 14 '18 at 12:15

Noopur Dabhi

1,867
25
38

Really Impressive. But can we do for any other style ? – Hidayt Rahman May 01 '19 at 09:32
yes, '--color' is just a variable, you can name it the way you want and you can set any style property – Noopur Dabhi May 01 '19 at 14:16
What about parent element, in case if i want color on somewhere else element how can we do this? – Hidayt Rahman May 01 '19 at 16:02
Do you have any jsfiddle link explaining example?? – Noopur Dabhi May 02 '19 at 05:09
Impressive but will not work in our favorite browser- IE11. – Phil Jul 08 '21 at 01:01
Well... IE-what? – Antoine Rucquoy Nov 22 '21 at 09:40

score 5 · Accepted Answer · answered Apr 10 '17 at 20:57

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

Thank you Daniel James for your detailed reply, very much appreciated. My intention was to create a one block of reusable code (instead of as many CSS classes as phone-types I will end up with :) ) using **SCSS** and **@mixin** to which I can just pass in a parameter and use perhaps '@if else' to get the desired result. Guess, I have still not understood SCSS properly. I also read somewhere that we can use 'attr()' function with **before** and pass in an attribute from the HTML element to work on the element. What do you think about that approach? Once again, thanks for your help, appreciated! — Gauzy, Apr 11 '17 at 04:43
No worries. Have a look at this answer here for [how to use if statements in Sass](http://stackoverflow.com/a/12410079/7236046). You can use HTML attributes in CSS but again, CSS will be static, non changing output so you can style based on an [attribute](https://developer.mozilla.org/en/docs/Web/CSS/attr) but you'd still need all CSS rules written out as is. — , Apr 11 '17 at 06:05

Passing values from HTML to SCSS

2 Answers2

Linked