Pass integer values from html to scss

Question

I would like to do something like this

html

<div class="myClass" givenValue="myValue">myText</div>

scss

.myClass {
    @if (givenValue < 0) {
        color: red;
    } @else {
        color: black;
    }
}

The goal is really to move style things from html to scss. For example in angular it's possible to use ngClass but that's not what I want to do.

I know in it's possible to do this

html

<div class="fill-color" style="--color: blue;">Test</div>

scss

.fill-color {
  color: var(--color);
}

It's the idea but unfortunately, it's not the solution for my case because I have an integer and @if statement.

Thank you in advance for your advices!

Quentin · Accepted Answer · 2020-04-09 09:53:15Z

2

You can't. SCSS is preprocessed. By the time HTML is involved, it is too late. You don't have SCSS anymore, just CSS.

Consider using JavaScript instead.

document.querySelectorAll('.myClass').forEach(element => {
  if (element.dataset.givenValue < 0) element.classList.add("negative")
});

.myClass {
  color: black;
}

.myClass.negative {
  color: red;
}

<div class="myClass" data-given-value="-1">myText</div>
<div class="myClass" data-given-value="0">myText</div>
<div class="myClass" data-given-value="1">myText</div>

Or generating class names with server-side code before the HTML gets to the browser.

answered Apr 9, 2020 at 9:53

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass integer values from html to scss

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related