Question

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

我想做的是使:: before和:: after的颜色根据其分配给父“图片”类的类而改变。

我在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中的颜色保持动态。

Answer 1

:: before和:: after的颜色将根据分配给父“图片”类的类而改变。

我想您的类别和颜色已经定义好了，颜色是动态的，但不是无限或不确定的。

在您的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代码应如下所示。

$rankColors: trainee #00AA00, traineebuild #00AA00, mod #55FF55, builder #55FF55, srmod #FFFF55, architect #FFFF55, developer #FFAA00, admin #FF5555, manager #AA0000;
@each $i in $rankColors {
  .#{nth($i, 1)} {
    .picture{
      &:before,
      &:after{
        background-color:nth($i, 2);
      }
    }
  }
}

:: before和:: after上SCSS中的动态类名称

1 个答案: