Javascript 在：：before和：：after上的SCS中的动态类名

我试图为我的网页创建动态类，但似乎无法使其正常工作

我要做的是使：：before和：：after的颜色根据它分配给父“picture”类的类而变化

我在我的SCSS代码中突出显示了下面哪些行需要是动态的

.picture {
      display: inline-block;
      height: 130px;
      width: 130px;
      margin-bottom: 50px;
      z-index: 1;
      position: relative;
      &:before {
        content: "";
        width: 100%;
        height: 0;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        bottom: 135%;
        right: 0;
        left: 0;
        opacity: 0.9;
        transform: scale(3);
        transition: all 0.3s linear 0s;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
}

使：：before和：：after中的颜色成为动态的

.picture {
      display: inline-block;
      height: 130px;
      width: 130px;
      margin-bottom: 50px;
      z-index: 1;
      position: relative;
      &:before {
        content: "";
        width: 100%;
        height: 0;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        bottom: 135%;
        right: 0;
        left: 0;
        opacity: 0.9;
        transform: scale(3);
        transition: all 0.3s linear 0s;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
}

：：before和：：after的颜色将根据分配给父“picture”类的类而变化

我猜你的类和颜色已经定义好了，颜色是动态的，但不是无限的或不确定的

在Sass代码中，定义类如下

.some-dynamic-class{
  .picture{
    &:before,
    &:after{
      background-color:#some-color;
    }
  }
}

然后在Angular代码中实现动态类逻辑，最好是通过输入

@Input() dynamicClass:string;

然后在模板中对父元素使用ngClass

<parent-element [ngClass]="dynamicClass">
    <div class="picture">
    </div>
</parent-element>

：：before和：：after的颜色将根据分配给父“picture”类的类而变化

我猜你的类和颜色已经定义好了，颜色是动态的，但不是无限的或不确定的

在Sass代码中，定义类如下

.some-dynamic-class{
  .picture{
    &:before,
    &:after{
      background-color:#some-color;
    }
  }
}

然后在Angular代码中实现动态类逻辑，最好是通过输入

@Input() dynamicClass:string;

然后在模板中对父元素使用ngClass

<parent-element [ngClass]="dynamicClass">
    <div class="picture">
    </div>
</parent-element>

---

你是想用Sass还是Angular来解决这个问题？因为你的问题有两个标签。对于Angular，你有ngClass和ngStyle用于动态样式。我也不介意。什么是最简单的。你是想用Sass还是Angular来解决这个问题？因为你的问题有两个标签。对于Angular，你有ngClass和ngStyle用于动态样式。我也不介意。什么是最简单的。我只有这个

$rankColors:“培训生”#00AA00，“培训生建造”#00AA00，“mod”#55FF55，“建设者”#55FF55“srmod”#ffffff55，“架构师”#ffffff55，“开发者”#FFAA00，“管理员”#FF5555，“经理”#AA0000@每个$i在$rankColors{.{n（$i，1）}{背景：n（$i，2）}}

我只有这个

$rankColors:“培训生”#00AA00，“培训生建造”#00AA00，“mod”#55FF55，“建设者”#55FF55“srmod”ff55，“建筑师”#FFFF55，“开发者”#ffa00，“管理员”#ff55，“manager”#AA0000；@每个$i以$rankColors{.#{n（$i，1）}{背景：n（$i，2）；}}