将值传递给HTML中的scss类

Question

我想在我的scss文件中使用泛型类,如果我只传递颜色值,它会设置颜色和边框属性.我不想在我的scss文件中硬编码颜色值.

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

如何从html类名传递参数？

Answer 1

我为你创建了一个JSFiddle:在这里输入链接描述

HTML:

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

SCSS:

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

请注意:attr()函数可以与任何CSS属性一起使用,但对内容以外的属性的支持是实验性的.

来源:在此处输入链接说明