How do you pass a variable to SCSS/CSS from HTML's class name?

Question

What I want to do is like this

HTML

<div class="custom-color--ff0000">Red</div>
<div class="custom-color--00ff00">Green</div>
<div class="custom-color--0000ff">Blue</div>

CSS

.custom-color--(hex) {
  color:  '#' + (hex);
}

Is it possible to do this? Would I need Sass?

nntrn · Accepted Answer · 2020-02-04 03:20:11Z

5

You can use a mixin to generate modifier classes in SASS:

@mixin add-color($argument) {
  $string: unquote($argument);

  &--#{$string} {
    color: unquote('#' + $argument);
  }
}

example:

.custom-color {
  @include add-color(404145);
  @include add-color(ff0000);
}

output in CSS:

.custom-color--404145 {
  color: #404145;
}

.custom-color--ff0000 {
  color: #ff0000;
}

Read more about it here: Generate All Your Utility Classes with Sass Maps

answered Feb 4, 2020 at 3:20

nntrn

7273 silver badges11 bronze badges

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

1 Comment

HenriDev Over a year ago

this doesn't allow you to dynamically change the color you still have to update your sass each time you want to use a different class to adjust the color. Is there a way to let sass just grab a part of a class name and use it to set the color ?

vinnlee · Accepted Answer · 2020-02-04 02:23:19Z

1

Don't know why you want to do this but I think you can achieve similar by using CSS custom properties.

For example:

HTML

<div class="custom-color" style="--red: #ff0000">Red</div>
<div class="custom-color" style="--green: #00ff00">Green</div>
<div class="custom-color" style="--blue: #0000ff">Blue</div>

CSS

.custom-color {
  color:  var(--red); // or what color you want
}

answered Feb 4, 2020 at 2:23

vinnlee

427 bronze badges

Collectives™ on Stack Overflow

How do you pass a variable to SCSS/CSS from HTML's class name?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related