CODEWITHSUNDEEP
htmlsass
Izaya
Izaya

Reputation: 1548

Pass integer values from html to scss

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!

Upvotes: 1

Views: 259

Answers (1)

Quentin
Quentin

Reputation: 943547

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.

Upvotes: 2

Related Questions