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

Question

I'm trying to make dynamic classes for my webpage but can't seem to get it to work.

What I am trying to do is make it so an ::before and ::after 's colours will change depending on the class it's assigned to the parent 'picture' class.

I have highlighted in my SCSS code below which lines need to be dynamic.

.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;
      }
}

For the colours in the ::before and ::after to be dynamic.

Answer 1

::before and ::after 's colours will change depending on the class it's assigned to the parent 'picture' class.

I guess your classes and colors will be defined already, the colors are dynamic but not infinite or uncertain.

In your Sass code define classes as below

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

And then in your Angular code implement your dynamic class logic, preferably by an input;

@Input() dynamicClass:string;

And then in your template use ngClass on the parent element

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

EDIT: Then in your case, from your comment, the sass code should be like this.

$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);
      }
    }
  }
}