Pass value to scss class from HTML [duplicate]

Question

I want a generic class in my scss file which sets the color and border property if i just pass a color value. I dont want to hard code color value in my scss file.

@mixin myStyle($color) {
  color: $color;
  border-left: 5px solid $color;
}
.item{
 @include myStyle(red); // i want to pass color value from my html class.
}

How to pass arguments from html class name ?

Answer 1

I've create a JSFiddle for you: enter link description here

HTML:

<p class="item" data-test="red">Vikramaditya</p>

SCSS:

p::before {
  content: attr(data-test) " ";
}

please note: The attr() function can be used with any CSS property, but support for properties other than content is experimental.

source: enter link description here